起因是刷知乎时碰到这么个问题：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. 一步步构造自己的vue2.0+webpack环境

    前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...

  2. 如何直接在 PC 端获取其它端设备的 UserAgent 信息呢？

    如何直接在 PC 端获取其它端设备的 UserAgent 信息呢 [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5909615.html 序 希望收 ...

  3. J2EE 项目读写分离

    先回答下 1.为啥要读写分离? 大家都知道最初开始,一个项目对应一个数据库,基本是一对一的,但是由于后来用户及数据还有访问的急剧增多, 系统在数据的读写上出现了瓶颈,为了让提高效率,想读和写不相互影响 ...

  4. php json_encode数据格式化

    在用ajax与后台交互数据的时候,后台传回来的数据格式不正确,后参考@傲雪星枫的博客在PHP文件添加了一段代码 :echo json_encode($arr); 成功解决.

  5. SpringMVC一路总结（一）

    SpringMVC听闻已久,早在去年就被学长问到关于SpringMVC的基础知识,当时也没在意.主要是工作中也没有用到关于SpringMVC的技术,因此免于没有时间和精力的借口就没有接触和学习Spri ...

  6. 代码的坏味道（7）——临时字段(Temporary Field)

    坏味道--临时字段(Temporary Field) 特征 临时字段的值只在特定环境下有意义,离开这个环境,它们就什么也不是了. 问题原因 有时你会看到这样的对象:其内某个实例变量仅为某种特定情况而设 ...

  7. scikit-learn一般实例之六:构建评估器之前进行缺失值填充

    本例将会展示对确实值进行填充能比简单的对样例中缺失值进行简单的丢弃能获得更好的结果.填充不一定能提升预测精度,所以请通过交叉验证进行检验.有时删除有缺失值的记录或使用标记符号会更有效. 缺失值可以被替 ...

  8. 游戏启示录 关于Update的相关问题

    游戏启示录 关于Update的相关问题 这里说的Update是指的游戏的主循环.一般情况下.为了程序的方便控制我们一般只会有一个主循环.所有的游戏逻辑都会在这一个循环中完成.(额,其实这么做有点浪费. ...

  9. 04实现累加和计算功能并且实现textbox不允许输入数字以外的字符但不包括退格键同时不允许第一个数值为0

    private void button1_Click(object sender, EventArgs e) { double number1, number2; if (double.TryPars ...

  10. 【项目管理】图解GitHub基本操作

    一.注册并登陆到github网站 1.1.打开github网站首页(https://github.com/) 1.2.注册一个自己的github账号 创建账户后再验证自己的邮箱,然后就可以登陆到git ...