ホームページ >ウェブフロントエンド >htmlチュートリアル >chrome_html/css_WEB-ITnose の非表示文字によって引き起こされるフローティングの問題
chrome_html/css_WEB-ITnose の非表示文字によって引き起こされるフローティングの問題
- WBOYオリジナル
- 2016-06-24 11:23:561179ブラウズ
理由は、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