星空网 > 软件开发 > 网页设计

chrome中不可见字符引发的float问题

  起因是刷知乎时碰到这么个问题:https://www.zhihu.com/question/41400503

  问题代码如下:

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><style>  .cf {    zoom: 1;  }  .cf:after {    clear: both;    content: "";    display: block;  }	.cf:before {	  content: "";	  display: block;	}  .out {    width: 730px;    border: 1px solid #ccc;  }  .left {    float: left;    width: 90px;    height: 20px;    margin: 3px 5px;    background: #D7E9F7;  }  .other {    width: 10px;    background: red;  }</style></head><body>  <div >    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>  </div></body></html> 

  

  在chrome中,最后一个.other会float到第一行的末尾:

chrome中不可见字符引发的float问题

  最开始认为是before伪类的问题:

chrome中不可见字符引发的float问题

  给出的解决方案是让提问者删掉.cf的before伪类,然后.other正常float到第二行最后。

  后来细细想了下,没有听说过类似的问题,搜了下也没有发现类似案例,怀疑问题判断有误。copy提问者代码到sublime里面进行排错测试,习惯性把css代码compact,.other居然正常float。

  恰巧前几天见过一个不可见字符导致页面显示错误的问题,灵光一闪地往这方面怀疑起来,设置sublime显示空白:"draw_white_space": "all"。果然有问题:

  chrome中不可见字符引发的float问题

  改用UltraEdit的16进制视图打开:

  chrome中不可见字符引发的float问题

  在display前面有两个编码为e38080的不可见字符,查编码对照表:

  chrome中不可见字符引发的float问题

  

  最近状态不佳,一直无所事事打酱油,碰到个问题不断往深处探究,感觉真是比打DOTA还爽!!!

 

 

 

     

 

 

UltraEdit 




原标题:chrome中不可见字符引发的float问题

关键词:chrome

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

魅力惠:https://www.goluckyvip.com/tag/38632.html
魅绅科技:https://www.goluckyvip.com/tag/38633.html
门口可可:https://www.goluckyvip.com/tag/38634.html
门门实操手录:https://www.goluckyvip.com/tag/38635.html
萌店全球购:https://www.goluckyvip.com/tag/38636.html
萌啦出海:https://www.goluckyvip.com/tag/38638.html
抖音电商副总裁将赴TikTok电商任职:https://www.goluckyvip.com/news/187213.html
中国跨境电商持续爆发,韩国本土企业慌了:https://www.kjdsnews.com/a/1836491.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流