Los comentarios de la página web generan desbordamiento de texto en IE

Autor：Eve Cole Fecha de actualización：2025-06-12 01:16:01

El código experimental es el siguiente:

<! Doctype html public -// w3c // dtd xhtml 1.0 xmlns = http: //www.w3.org/1999/xhtml> <lEd> <meta http-oquiv = content-type content = text/html; Charset = GB2312/> <title> un cerdo más </title> </head> <body> <div style = width: 400px> <div style = float: izquierda> </div> <!--<div style = float: right; width: 400px> ↓ este es el cerdo extra </div> </div> </body> </html>

Consejo: puede modificar algún código primero y luego ejecutar 1. Pruebe en IE y FF, y solo se produce un desbordamiento de texto en IE.

Nota: El desbordamiento de texto causado por comentarios es un error de IE.

2. Retire el flotador: izquierda; en <div style = float: izquierda> </div>, y encontrará que falta la palabra adicional "cerdo" y la página se muestra normalmente.

<! Doctype html public -// w3c // dtd xhtml 1.0 xmlns = http: //www.w3.org/1999/xhtml> <lEd> <meta http-oquiv = content-type content = text/html; Charset = GB2312/> <title> un cerdo </title> </head> <body> <div style = width: 400px> <div> </div> <!--> <div style = float: right; width: 400px> ↓ Este es el cerdo extra </div> </div> </body> </html>

Consejo: puede modificar algún código primero y luego ejecutar el mismo flotador: a la derecha; en <div style = float: correcto; ancho: 400px>. La palabra de cerdo adicional también desaparece y la página se muestra normalmente.

<! Doctype html public -// w3c // dtd xhtml 1.0 xmlns = http: //www.w3.org/1999/xhtml> <lEd> <meta http-oquiv = content-type content = text/html; Charset = GB2312/> <title> un cerdo más </title> </head> <body> <div style = width: 400px> <div style = float: izquierda> </div> <!--<Div style = width: 400px> ↓ Este es el cerdo extra </div> </div> </body> </html>

Consejo: puede modificar algún código primero y luego ejecutar las instrucciones: el desbordamiento de texto causado por comentarios está relacionado con el bloqueo flotante.

3. Transfiera los comentarios al frente de <div style = float: izquierda> </div>, el exceso de palabra de cerdo desaparece y la página se muestra normalmente.

<! Doctype html public -// w3c // dtd xhtml 1.0 xmlns = http: //www.w3.org/1999/xhtml> <lEd> <meta http-oquiv = content-type content = text/html; Charset = GB2312/> <title> un cerdo </title> </head> <body> <div style = width: 400px> <!--> <div style = float: left> </div> <div style = float: right; width: 400px> ↓ este es el cerdo extra </div> </div> </body> </html>

Consejo: puede modificar primero algún código y luego ejecutar y transferir los comentarios a <Div style = float: correcto; ancho: 400px> ↓ Este es el cerdo adicional </div>. La palabra de cerdo adicional también desaparece y la página se muestra normalmente.

<! Doctype html public -// w3c // dtd xhtml 1.0 xmlns = http: //www.w3.org/1999/xhtml> <lEd> <meta http-oquiv = content-type content = text/html; Charset = GB2312/> <title> un cerdo </title> </head> <body> <div style = width: 400px> <div style = float: izquierda> </div> <div style = float: right; width: 400px> ↓ Este es el cerdo extra </div> <!--> </div> </body> </html>

Consejo: puede modificar algún código primero y luego ejecutar las instrucciones: el desbordamiento de texto causado por comentarios está relacionado con su ubicación. (Se puede entender junto con el punto 2)

4. Eliminar el ancho: 400px en <Div Style = Float: Right; Ancho: 400px>, el exceso de palabra de cerdo desaparece y la página se muestra normalmente.

<! Doctype html public -// w3c // dtd xhtml 1.0 xmlns = http: //www.w3.org/1999/xhtml> <lEd> <meta http-oquiv = content-type content = text/html; Charset = GB2312/> <title> Un cerdo más </title> </head> <body> <div style = width: 400px> <div style = float: izquierda> </div> <!-> <div style = float: right;> ↓ Este es el cerdo extra </iv> </div> </body> </html>

Consejo: puede modificar algún código primero y luego ejecutar las instrucciones: el desbordamiento de texto causado por comentarios está relacionado con el ancho fijo del bloque de texto (ya sea un valor absoluto o un valor relativo).

5. Aumente el número de comentarios: cuando aparecerá 1 comentario, aparecerá 1 palabra; Cuando aparecerán 2 comentarios, aparecerán 3 palabras; Cuando aparecerán 3 comentarios, aparecerán 5 palabras ...

Consejo: puede modificar algún código primero y luego ejecutarlo

<! Doctype html public -// w3c // dtd xhtml 1.0 xmlns = http: //www.w3.org/1999/xhtml> <lEd> <meta http-oquiv = content-type content = text/html; Charset = GB2312/> <title> un cerdo más </title> </head> <body> <div style = width: 400px> <div style = float: izquierda> </div>  <div style = float: derecho; ancho: 400px> ↓ este es el cerdo adicional </div> </iv> </body> </html>

Consejo: puede modificar algún código primero y luego ejecutarlo

<! Doctype html public -// w3c // dtd xhtml 1.0 xmlns = http: //www.w3.org/1999/xhtml> <lEd> <meta http-oquiv = content-type content = text/html; Charset = GB2312/> <title> un cerdo más </title> </head> <body> <div style = width: 400px> <div style = float: left> </div>  <!--> <div style = float: right; ancho: 400px> ↓ este es el cerdo adicional </iv> </div> </body> </html>

Consejo: puede modificar algún código primero y luego ejecutarlo

<! Doctype html public -// w3c // dtd xhtml 1.0 xmlns = http: //www.w3.org/1999/xhtml> <lEd> <meta http-oquiv = content-type content = text/html; Charset = GB2312/> <title> un cerdo más </title> </head> <body> <div style = width: 400px> <div style = float: left> </div>   <Div style = float: Right; width: 400px> ↓ esto es el cerdo adicional </div> </div> </body </body </body </body </html;

Consejo: puede modificar algún código primero y luego ejecutarlo. Obtendremos una fórmula de la regla anterior: el número de palabras que desbordan el texto = el número de comentarios * 2-1. El número de palabras aquí es verdadero cuando hay números chinos o ingleses.

Cuando el recuento de palabras de texto desbordante es mayor que el recuento de palabras de texto, el bloque de texto desaparecerá.

<! Doctype html public -// w3c // dtd xhtml 1.0 xmlns = http: //www.w3.org/1999/xhtml> <lEd> <meta http-oquiv = content-type content = text/html; Charset = GB2312/> <title> un cerdo más </title> </head> <body> <div style = width: 400px> <div style = float: izquierda> </div>     <!--> <div style = float; es el cerdo adicional </div> </div> </body> </html>

Consejo: puede modificar algún código primero y luego ejecutar las instrucciones: el número de palabras desbordantes está relacionada con el número de comentarios.

A partir de las pruebas de 1 y 2, no realice comentarios entre 2 bloques flotantes.

Solución:

1. No se realizan comentarios. La solución más fácil y rápida, jeje ...

<! Doctype html public -// w3c // dtd xhtml 1.0 xmlns = http: //www.w3.org/1999/xhtml> <lEd> <meta http-oquiv = content-type content = text/html; Charset = GB2312/> <title> un cerdo </title> </head> <body> <div style = width: 400px> <div style = float: izquierda> </div> <div style = float: right; width: 400px> ↓ Este es el cerdo extra </div> </div> </body> </html>

Consejo: puede modificar algún código primero y luego ejecutar 2. No coloque comentarios entre 2 bloques flotantes.

<! Doctype html public -// w3c // dtd xhtml 1.0 xmlns = http: //www.w3.org/1999/xhtml> <lEd> <meta http-oquiv = content-type content = text/html; Charset = GB2312/> <title> un cerdo </title> </head> <body> <div style = width: 400px> <!--> <div style = float: left> </div> <div style = float: right; width: 400px> ↓ este es el cerdo extra </div> </div> </body> </html>

Consejo: puede modificar algún código primero y luego ejecutar 3. Incluya el bloque de texto entre el nuevo <div> </div>, como: <div style = float: right; ancho: 400px> <div> ↓ este es el cerdo adicional </div> </div>.

<! Doctype html public -// w3c // dtd xhtml 1.0 xmlns = http: //www.w3.org/1999/xhtml> <lEd> <meta http-oquiv = content-type content = text/html; Charset = GB2312/> <title> un cerdo más </title> </head> <body> <div style = width: 400px> <div style = float: izquierda> </div> <!--<div style = float: right; width: 400px> <div> ↓ este es el cerdo extra </div> </iv> </iv> </body> </html>

Consejo: puede modificar algún código primero y luego ejecutar 4. Retire el ancho fijo del bloque de texto, que tiene similitudes con 3.

Consejo: puede modificar primero algún código y luego ejecutar el análisis y la solución anteriores que pueden ser inadecuados o inexactos. Bienvenido para discutirme y corregirme.