ウェブページのコメントにより IE でテキストがオーバーフローする

実験コードは次のとおりです。

ヒント: 最初にコードの一部を変更してから、1. IE と FF でテストを実行できます。テキストオーバーフローは IE でのみ発生します。
注意: コメントによってテキストがオーバーフローするのは IE のバグです。
2. <div style="float:left"></div> 内の "float:left;" を削除すると、余分な単語 "pig" が消え、ページが正常に表示されることがわかります。

ヒント: 最初にコードの一部を変更してからプログラムを実行し、<div style="float:right;width:400px"> 内の "float:right;" を削除します。余分な "pig" 文字も消え、ページが正常に表示されます。

ヒント: 実行前にコードの一部を変更できます。注: コメントによって発生するテキストのオーバーフローは、ブロックのフローティングに関連しています。
3. コメントを <div style="float:left"></div> の先頭に移動すると、余分な「pig」文字が消え、ページが正常に表示されます。

ヒント: 最初にコードの一部を変更してからプログラムを実行し、コメントを <div style="float:right;width:400px">↓This is the extra pig</div> の下に移動することができます。余分な単語「pig」も消え、ページが正常に表示されます。

ヒント: 実行する前にコードの一部を変更できます。注: テキストのオーバーフローを引き起こすコメントは、その位置に関連しています。（ポイント2と合わせて理解できます）
4. <div style="float:right;width:400px"> の「width:400px」を削除すると、余分な単語「pig」が消え、ページが正常に表示されます。

ヒント: 実行前に一部のコードを変更できます。注: コメントによって発生するテキストのオーバーフローは、テキストブロックの固定幅 (絶対値か相対値かに関係なく) に関連しています。
5. コメント数を増やします。コメントが 1 つある場合は、さらに 1 つの単語が追加されます。コメントが 2 つある場合は、さらに 3 つの単語が追加されます。コメントが 3 つある場合は、さらに 5 つの単語が追加されます...

ヒント: 実行前にコードの一部を変更することができます

ヒント: 実行前にコードの一部を変更することができます

ヒント: 実行前にコードの一部を変更することができます

ヒント: 最初にコードの一部を変更してから実行することができます。上記の規則から、オーバーフローした単語数 = コメント数 * 2-1 という式が得られます。ここでの単語数は、中国語または英語の数字に有効です。
オーバーフローテキストがテキストより大きい場合、テキストブロックは消えます。

ヒント: 実行前にコードの一部を変更できます。注: オーバーフローワードの数はコメントの数に関係します。
テスト 1 と 2 から、コメントは 2 つのフローティングブロックの間に配置すべきではないことがわかります。
解決：
1. コメントは投稿されません。最も簡単で素早い解決策です、へへ...

ヒント: 実行前にコードの一部を変更できます。2. 2 つのフローティングブロックの間にコメントを配置しないでください。

ヒント: 実行する前に、いくつかのコードを変更できます。3. テキストブロックを新しい <div></div> で囲みます (例: <div style="float:right;width:400px"><div>↓これは追加の豚です</div></div>)。

ヒント: 最初にいくつかのコードを変更してから 4 を実行できます。3 と同様に、テキストブロックの固定幅を削除します。

ヒント: 実行前にコードの一部を変更できます。上記の分析と解決策は不十分または不正確な場合があります。議論して修正することを歓迎します。

<<: MySQLのトランザクション特性とレベル原則の分析

>>: Vue での ElementUI の使用に関する詳細な説明