Rumah >hujung hadapan web >html tutorial >chrome中不可见字符引发的float问题_html/css_WEB-ITnose
chrome中不可见字符引发的float问题_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:23:561179semak imbas
起因是刷知乎时碰到这么个问题：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
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Sass 基础(四)_html/css_WEB-ITnoseArtikel seterusnya：（一）css代码积累--自己经常忘记，但是总记不住的代码_html/css_WEB-ITnose