chrome_html/css_WEB-ITnose の非表示文字によって引き起こされるフローティングの問題-htmlチュートリアル-php.cn

chrome_html/css_WEB-ITnose の非表示文字によって引き起こされるフローティングの問題

WBOY

リリース： 2016-06-24 11:23:56

オリジナル

1168 人が閲覧しました

理由は、Zhihu を閲覧しているときにこの問題に遭遇したからです: 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 Will float to the end of the first line:

最初は、 before 疑似クラスの問題であると考えられていました:

与えられた解決策は、質問者にを削除するように依頼することです。 .cf の疑似クラスの前、その後 .other は通常どおり 2 行目の末尾に移動します。

後でよく考えてみたら、似たような問題は聞いたことがなかったので、検索しても同様の事例はなく、問題の判断が間違っていたのではないかと思いました。デバッグとテストのために質問者のコードをsublimeにコピーします。私はいつものようにcssコードを圧縮します、そして.otherは実際には普通に浮動します。

数日前、目に見えない文字が原因でページ表示エラーが発生するという問題を偶然目にしたのですが、この点に疑問を持ち、sublime を空白: "draw_white_space": "all" で表示するように設定しました。案の定、問題があります:

UltraEdit の 16 進ビューを使用して開きます:

ディスプレイの前に e38080 としてコード化された 2 つの非表示文字があります。エンコード比較テーブルを確認してください:

最近ステータスはジアではありません。忙しくするために何もしていません

問題に遭遇したときは、DOTA をプレイするよりもずっと良い気分です。！！

UltraEdit