起因是刷知乎时碰到这么个问题：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问题的更多相关文章

  1. ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法

    ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:b ...

  2. jst通用删除数组中重复的值和删除字符串中重复的字符

    以下内容属于个人原创,转载请注明出处,非常感谢! 删除数组中重复的值或者删除字符串重复的字符,是我们前端开发人员碰到很多这样的场景.还有求职者在被面试时也会碰到这样的问题!比如:问删除字符串重复的字符 ...

  3. 密码验证连续多位相同或者顺序字符引发的思考.md

    目录 密码验证连续多位相同或者顺序字符引发的思考 需求 思考 实现 总结 参考 密码验证连续多位相同或者顺序字符引发的思考 需求 虽然用户对于这种复杂的密码验证恨之入骨,但是有时出于安全的考虑,我们系 ...

  4. Chrome 中的彩蛋，一款小游戏，你知道吗？

    今天看到一篇文章,介绍chrome中的彩蛋,带着好奇心进去看了一眼,没想到发现了一款小游戏,个人觉得还不错,偶尔可以玩一下,放松放松心情!^_^ 当 Chrome 无法连接到互联网时, 或者上着网突然 ...

  5. SVN Files 的值“ < < < < < < < .mine”无效。路径中具有非法字符。

    错误 1 Files 的值“ < < < < < < < .mine”无效.路径中具有非法字符.     今天使用SVN进行更新的时候,出现了如上问题,想起卓 ...

  6. sql语句把字段中的某个字符去掉

    sql语句把字段中的某个字符去掉 )),'http://demo.m-school.net','') 例如: )),'http://192.168.2.180','') )),'http://zpzx ...

  7. 在 Chrome 中调试 Android 浏览器

    最近需要使用 Chrome Developer Tools 调试 Android 浏览器,但是官方指南并不是很好使,经过一番折腾,终于调试成功了,在此把经验分享给需要的朋友. Chrome Devel ...

  8. JAVA----编程列出一个字符串的全字符组合情况，原始字符串中没有重复字符

    package com.pb.demo.packclass.demo1; import java.util.HashSet; /** * 编程列出一个字符串的全字符组合情况,原始字符串中没有重复字符 ...

  9. firefox与chrome中对select下拉框中的option支持问题

    firefox可以直接修改option的字体样式,但是chrome中option的字体样式是继承select的,这个是在项目中遇到的,具体的可以看一下 http://www.cnblogs.com/r ...

随机推荐

  1. Python模拟登陆新浪微博

    上篇介绍了新浪微博的登陆过程,这节使用Python编写一个模拟登陆的程序.讲解与程序如下: 1.主函数(WeiboMain.py): import urllib2 import cookielib i ...

  2. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（16）-权限管理系统-漂亮的验证码

    系列目录 我们上一节建了数据库的表,但我发现很多东西还未完善起来,比如验证码,我们先做好验证码吧,验证码我们再熟悉不过了,为了防止恶意的登录,我们必须在登录页面加入验证码,下面我将分享一个验证码,这个 ...

  3. Android开发之基于AndroidStudio环境搭建和工程创建

    断断续续的学习安卓也有一段时间了.因为之前是搞iOS开发的, 之前有关iOS的博客请看<我的iOS开发系列博文>.<我的Objective-C系列文章>和<窥探Swift ...

  4. CentOS7安装iptables防火墙

    CentOS7默认的防火墙不是iptables,而是firewalle. 安装iptable iptable-service #先检查是否安装了iptables service iptables st ...

  5. 如何通过官方渠道为Windows 10 添加具有中国特色的字体

    Windows 10的变化细节上个人认为要比Windows 8多很多,而且很多功能找到之后还是小惊喜,就是挺多好用的地方居然都不正经宣传一下,微软真是搞得悄悄地干活? 今天为大家介绍一下通过官方途径添 ...

  6. spring帝国-开篇

    spring简介: spring是一个开源框架,spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE Dev ...

  7. ES6环境搭建及react-router学习

    一.起因 ES6新纳入了很多振奋人心的新特性,真的很让人忍不住去尝试一下.不过,由于现在大部分的浏览器对ES6的支持程度都不是很好.所以如果想要放心地使用一些新特性,还需要用一些工具,将ES6或者ES ...

  8. android快捷开发之Retrofit网络加载框架的简单使用

    大家都知道,安卓最大的特点就是开源化,这自然会产生很多十分好用的第三方API,而基本每一个APP都会与网络操作和缓存处理机制打交道,当然,你可以自己通过HttpUrlConnection再通过返回数据 ...

  9. 账号密码管理系统Access版本

    哈哈,花了我整整五天时间,账号密码管理系统软件终于成功编写完成了.由于我的各大论坛的账号密码特别多,记性又不好.所以一直以来都想要这么一个软件的,但是以前学习的都是面向过程的编程语言,一直无法实现这个 ...

  10. stm32新建工程详细步骤

    记得好早以前为了建一个keil的工程折腾了好久,在这里写写基本的Keil工程创建方法,以防自己以后再忘记: 新建工程 保存工程 选择器件 在这边新建文件夹,然后就是添加程序代码到里面去了.其中一些文件 ...