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问题的更多相关文章
- ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法
ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:b ...
- jst通用删除数组中重复的值和删除字符串中重复的字符
以下内容属于个人原创,转载请注明出处,非常感谢! 删除数组中重复的值或者删除字符串重复的字符,是我们前端开发人员碰到很多这样的场景.还有求职者在被面试时也会碰到这样的问题!比如:问删除字符串重复的字符 ...
- 密码验证连续多位相同或者顺序字符引发的思考.md
目录 密码验证连续多位相同或者顺序字符引发的思考 需求 思考 实现 总结 参考 密码验证连续多位相同或者顺序字符引发的思考 需求 虽然用户对于这种复杂的密码验证恨之入骨,但是有时出于安全的考虑,我们系 ...
- Chrome 中的彩蛋,一款小游戏,你知道吗?
今天看到一篇文章,介绍chrome中的彩蛋,带着好奇心进去看了一眼,没想到发现了一款小游戏,个人觉得还不错,偶尔可以玩一下,放松放松心情!^_^ 当 Chrome 无法连接到互联网时, 或者上着网突然 ...
- SVN Files 的值“ < < < < < < < .mine”无效。路径中具有非法字符。
错误 1 Files 的值“ < < < < < < < .mine”无效.路径中具有非法字符. 今天使用SVN进行更新的时候,出现了如上问题,想起卓 ...
- sql语句把字段中的某个字符去掉
sql语句把字段中的某个字符去掉 )),'http://demo.m-school.net','') 例如: )),'http://192.168.2.180','') )),'http://zpzx ...
- 在 Chrome 中调试 Android 浏览器
最近需要使用 Chrome Developer Tools 调试 Android 浏览器,但是官方指南并不是很好使,经过一番折腾,终于调试成功了,在此把经验分享给需要的朋友. Chrome Devel ...
- JAVA----编程列出一个字符串的全字符组合情况,原始字符串中没有重复字符
package com.pb.demo.packclass.demo1; import java.util.HashSet; /** * 编程列出一个字符串的全字符组合情况,原始字符串中没有重复字符 ...
- firefox与chrome中对select下拉框中的option支持问题
firefox可以直接修改option的字体样式,但是chrome中option的字体样式是继承select的,这个是在项目中遇到的,具体的可以看一下 http://www.cnblogs.com/r ...
随机推荐
- 计算机程序的思维逻辑 (53) - 剖析Collections - 算法
之前几节介绍了各种具体容器类和抽象容器类,上节我们提到,Java中有一个类Collections,提供了很多针对容器接口的通用功能,这些功能都是以静态方法的方式提供的. 都有哪些功能呢?大概可以分为两 ...
- Http压测工具wrk使用指南
用过了很多压测工具,却一直没找到中意的那款.最近试了wrk感觉不错,写下这份使用指南给自己备忘用,如果能帮到你,那也很好. 安装 wrk支持大多数类UNIX系统,不支持windows.需要操作系统支持 ...
- 微信小程序定时器组件(输入时间字符串即可倒计时)
昨天写了代码,今天发现要重用,干脆就抽出来做个组件得了,顺便还改善了一下代码通用性. 昨天的代码在这里 github下载地址 用法: 引入: var timer = require('../../pl ...
- Redis分布式集群几点说道
原文地址:http://www.cnblogs.com/verrion/p/redis_structure_type_selection.html Redis分布式集群几点说道 Redis数据量日益 ...
- 【转】基于.NET平台常用的框架整理
自从学习.NET以来,优雅的编程风格,极度简单的可扩展性,足够强大开发工具,极小的学习曲线,让我对这个平台产生了浓厚的兴趣,在工作和学习中也积累 了一些开源的组件,就目前想到的先整理于此,如果再想到, ...
- 在DevExpress程序中使用条形码二维码控件,以及进行报表打印处理
在很多业务系统里面,越来越多涉及到条形码.二维码的应用了,不管在Web界面还是WInform界面都需要处理很多物料相关的操作,甚至很多企业为了减少录入错误操作,为每个设备进行条形码.二维码的标签,直接 ...
- [Winform] DataGridView 总结(FAQ)
Q1. 如何使单元格不可编辑? A:设置 ReadOnly 属性,可以设置的对象包括 DataGridViewRow(行).DataGridViewColumn(列).DataGridViewCel ...
- Yii 2.x 错误处理器、异常处理器、致命错误处理器 - 类图
- Java传值和传址
调用函数时,传的参数过去可能是传值,也可能是传址.如果是传值,函数内部的操作对参数的值没有影响:如果是传址,函数内部的操作是对参数指向的内存进行操作,会影响参数的值. Java到底是传值还是传址?用下 ...
- python爬虫的一些心得
爬虫用于从网上得到目标数据,根据需要对其予以利用,加以分析,得到想要的实验成果.现在讲一讲我这两天学到的东西. 第一,爬虫的算法结构,包括以下几个方面: (1)读取网络数据 (2)将获取的数据解析为目 ...