communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > chrome中不可见字符引发的float问题_html/css_WEB-ITnose

chrome中不可见字符引发的float问题_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 11:23:56
original
1169 Les gens l'ont consulté

　　起因是刷知乎时碰到这么个问题：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>
Copier après la connexion

　　

　　在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 

Étiquettes associées：
chrome中不可见字符引发的float问题
source：php.cn
Article précédent：Sass 基础(四)_html/css_WEB-ITnose Article suivant：（一）css代码积累--自己经常忘记，但是总记不住的代码_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2055
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2211
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1865
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1750
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1776
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal