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 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

巴特西

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

最新文章

热门文章