WebページのコメントIEでテキストオーバーフローを生成します

著者：Eve Cole 更新時間：2025-06-12 01:16:01

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

<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <hhtml xmlns = http：//www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> 1つの豚</title> </head> <body> <div style = width：400px> <div style = float：left> </div> <> <div style = float：右; width：400px>↓これはエキストラブタ</div> </div> </html> </html> </html>

ヒント：最初にいくつかのコードを変更してから、1。IEとFFでテストを実行すると、IEでテキストオーバーフローのみが発生します。

注：コメントによって引き起こされるテキストオーバーフローは、IEのバグです。

2。フロートを取り外し：左; <div style = float：left> </div>では、余分な単語「豚」が欠落しており、ページが正常に表示されていることがわかります。

<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <hhtml xmlns = http：//www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> 1匹の豚</title> </head> <body> <div style = width：400px> <div> </div> <！ - > <div style = float：width：400px>↓これは余分な豚です</div> </div> </body> </html>

ヒント：最初にいくつかのコードを変更してから、同じフロートを実行できます：右; in <div style = float：right; width：400px>。余分な豚の単語も消え、ページは正常に表示されます。

<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <hhtml xmlns = http：//www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> 1つの豚</title> </head> <body> <div style = width：400px> <div style = float：left> </div> <！ - > <div style = width：400px>↓これは余分な豚です</div> </div> </> html> <

ヒント：最初にいくつかのコードを変更してから、指示を実行できます。コメントによって引き起こされるテキストオーバーフローは、ブロックフローティングに関連しています。

3.コメントを<div style = float：left> </div>の前面に転送すると、余分な豚の単語が消え、ページが正常に表示されます。

<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <hhtml xmlns = http：//www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> 1匹の豚</title> </head> <body> <div style = width：400px> <！ - > <div style = float = float：left> </div> <div style = float：width：400px>↓これは余分な豚</div> </div> </html> </html> </html> </html>

ヒント：最初にいくつかのコードを変更してから、コメントを実行して<div style = float：right; width：400px>↓に転送できます。これは余分な豚</div>です。余分な豚の単語も消え、ページは正常に表示されます。

<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <hhtml xmlns = http：//www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> 1匹の豚</title> </head> <body> <div style = width：400px> <div style = float：left> </div> <div style = float：width：400px>↓これは余分な豚です</div> <！ - > </div> </html> </html>

ヒント：最初にいくつかのコードを変更してから、手順を実行できます。コメントによって引き起こされるテキストオーバーフローは、その場所に関連しています。（ポイント2と組み合わせて理解できます）

4。幅を削除：<div style = float：right; width：400px>の400pxで、余分な豚の単語が消え、ページが正常に表示されます。

<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <hhtml xmlns = http：//www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> 1つの豚</title> </head> <body> <div style = width：400px> <div style = float：left> </div> <！ - > <div style = float：右;>これは余分な豚です</div> </div> </body>

ヒント：最初にいくつかのコードを変更してから、命令を実行できます。コメントによって引き起こされるテキストオーバーフローは、テキストブロックの固定幅に関連しています（絶対値または相対値であるかどうか）。

5。コメントの数を増やす：1つのコメントの場合、1つの単語が表示されます。 2つのコメントの場合、3つの単語が表示されます。 3つのコメントがあると、5つの単語が表示されます...

ヒント：最初にいくつかのコードを変更してから実行できます

<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <hhtml xmlns = http：//www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title>もう1つの豚</title> </head> <body> <div style = width：400px> <div style = float：left> </div> <！ - > <！ - > <div style = float：right; width：400px>↓これ

ヒント：最初にいくつかのコードを変更してから実行できます

<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <hhtml xmlns = http：//www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> 1つの豚</title> </head> <body> <div style = width：400px> <div style = float：left> </div> <！</div style = float：right; width：400px>↓これ

ヒント：最初にいくつかのコードを変更してから実行できます

ヒント：最初にいくつかのコードを変更してから実行できます。上記のルールからフォーミュラを取得します。テキストのオーバーフローの単語の数=コメントの数 * 2-1。ここの単語の数は、中国語または英語の数がある場合に真実です。

あふれるテキストワードカウントがテキストワードカウントよりも大きい場合、テキストブロックは消えます。

<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <hhtml xmlns = http：//www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> 1つの豚</title> </head> <body> <div style = width：400px> <div style = float：left> </div> <！ - > <！ - > <！ - > <！ - > <！ - > <！ - > <余分な豚は</div> </div> </body> </html>です

ヒント：最初にいくつかのコードを変更してから、手順を実行できます。あふれる単語の数は、コメントの数に関連しています。

1と2のテストから、2つのフローティングブロックの間にコメントを配置しないでください。

解決：

1.コメントはありません。最も簡単で最速の解決策、hehe ...

<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <hhtml xmlns = http：//www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> 1匹の豚</title> </head> <body> <div style = width：400px> <div style = float：left> </div> <div style = float：width：400px>↓これは余分な豚です</div> </div> </body

ヒント：最初にコードを変更してから2を実行できます。2つのフローティングブロック間にコメントを配置しないでください。

<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <hhtml xmlns = http：//www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> 1匹の豚</title> </head> <body> <div style = width：400px> <！ - > <div style = float = float：left> </div> <div style = float：width：400px>↓これは余分な豚</div> </div> </html> </html> </html> </html>

ヒント：最初にコードを変更してから3を実行できます。次のような新しい<div> </div>の間にテキストブロックを含めます。

<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <hhtml xmlns = http：//www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title>もう1つの豚</title> </head> <body> <div style = width：400px> <div style = float：left> </div> <div style = float：right; width：400px> <div>↓これ

ヒント：最初にコードを変更してから4を実行できます。テキストブロックの固定幅を削除します。これには3と類似しています。

<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <hhtml xmlns = http：//www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> 1つの豚</title> </head> <body> <div style = width：400px> <div style = float：left> </div> <！ - > <div style = float：右;>これは余分な豚です</div> </div> </body>

ヒント：最初にいくつかのコードを変更してから、不十分または不正確な上記の分析とソリューションを実行できます。私を議論し、修正するためのようこそ。