起因是刷知乎时碰到这么个问题：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. C#异常处理经验(原则与方法)

         本文是异常处理经验性的文章,其实跟C#关系也不大.比较适合刚刚熟悉异常语法,而缺乏实战的读者.当然,经验老练的读者也可指出不足.给予意见.补充说明,一起完善文章,分享更多知识与经验.   1 ...

  2. 返回顶部的功能 div固定在页面位置不变

    1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...

  3. leetcode--5. Longest Palindromic Substring

    题目来自 https://leetcode.com/problems/longest-palindromic-substring/ 题目:Given a string S, find the long ...

  4. Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'(2)

    center os服务器上搭建discuz论坛初始化程序的时候出现的.我把localhost改成127.0.0.1解决了这个问题.

  5. Oracle数据库异机升级

    环境: A机:RHEL5.5 + Oracle 10.2.0.4 B机:RHEL5.5 需求: A机10.2.0.4数据库,在B机升级到11.2.0.4,应用最新PSU补丁程序. 目录: 一. 确认是 ...

  6. 网站实现微信登录之嵌入二维码——基于yii2开发的描述

    之前写了一篇yii2获取登录前的页面url地址的文章,然后发现自己对于网站实现微信扫码登录功能的实现不是很熟悉,所以,我会写2-3篇的文章来描述下一个站点如何实现微信扫码登录的功能,来复习下微信扫码登 ...

  7. SQL Server 并行操作优化，避免并行操作被抑制而影响SQL的执行效率

    为什么我也要说SQL Server的并行: 这几天园子里写关于SQL Server并行的文章很多,不管怎么样,都让人对并行操作有了更深刻的认识. 我想说的是:尽管并行操作可能(并不是一定)存在这样或者 ...

  8. 用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目，需要用到struts2标签从数据库查询数据，并且用迭代器iterator标签在查询页面显示，可是一开始，怎么也获取不到数据，想了许久，最后发现，是自己少定义了一个变量，也就是var变量。

    最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变 ...

  9. 和Java相关的书籍，想成为架构师的请收藏一下啊

    1.<<Effective Java 中文第二版>> 2.<<Java并发编程实践>> 3.<<Java核心技术(原书第8版)卷I_基础知识 ...

  10. pyhton学习笔记（基础五：数据类型、数据运算）

    数据类型初识 1. 数字 整数:2是一个整数的例子 长整数 不过是大一些的整数 3.23和52.3E-4是浮点数的例子.E标记表示10的幂.在这里,52.3E-4表示52.3*10-4. (-5+4j ...