ホームページ  >  記事  >  ウェブフロントエンド  >  CSSテキストの重複、つまりバグによりテキストが奇妙な重複を引き起こします

CSSテキストの重複、つまりバグによりテキストが奇妙な重複を引き起こします

高洛峰
高洛峰オリジナル
2016-11-24 14:53:221473ブラウズ

複数のフローティング要素がコメントを挟んで連続している場合、最後のフローティング要素のテキストが下部にコピーされることがあります。学名 Duplicate Character Bug

プログラムコード




もう一頭の豚





↓これは追加の豚です< ;/div>
< ;/div>


は以下の方法で解決できます:
1. コメントを置かないでください。最も簡単で最速の解決策
2. 2つのフローティングブロックの間にコメントを置かないでください。
3. 新しい

の間にテキスト ブロックを含めます (例:
↓これは追加です The pig< /div>

4. テキストブロックの固定幅を削除します。これは 3 と同様です。
5. pig の後に
やスペースを追加する人もいますが、これは現象を解消するだけです。
6. フローティング要素の幅を包含要素の下部に達しないように複数設定したり、最後の要素に margin-right: -3px; 以下を設定したりしないでください。
7. コメントは次のように記述できます:


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。