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 {
         730px;
        border: 1px solid #ccc;
    }
    .left {
        float: left;
         90px;
        height: 20px;
        margin: 3px 5px;
        background: #D7E9F7;
    }
    .other {
         10px;
        background: red;
    }
</style>
</head>

<body>

    <div class="out cf">
        <div class="left"></div>
        <div class="left"></div>
        <div class="left"></div>
        <div class="left"></div>
        <div class="left"></div>
        <div class="left"></div>
        <div class="left"></div>
        <div class="left"></div>
        <div class="left"></div>
        <div class="left"></div>
        <div class="left"></div>
        <div class="left"></div>
        <div class="left"></div>
        <div class="left other"></div>
    </div>

</body>

</html>  

  

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

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

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

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

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

  

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

  

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

  

  

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

     

UltraEdit 

原文地址:https://www.cnblogs.com/canrz/p/5282667.html