Les commentaires de la page Web génèrent un débordement de texte dans IE

Auteur：Eve Cole Date de mise à jour：2025-06-12 01:16:01

Le code expérimental est le suivant:

<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><html xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; Charset = GB2312 /> <Title> Un autre porc </ title> </ head> <body> <div style = width: 400px> <div style = float: Left> </div> <! - -> <div style = float: droite; width: 400px> ↓ Ceci est le porc supplémentaire </v> </v> </odth> </html>

Astuce: vous pouvez d'abord modifier du code, puis exécuter 1. Tester dans IE et FF, et seul le débordement de texte se produit dans IE.

Remarque: le débordement de texte causé par les commentaires est un bug de IE.

2. Retirez le flotteur: à gauche; Dans <div style = float: Left> </div>, et vous constaterez que le mot supplémentaire "cochon" est manquant et que la page s'affiche normalement.

<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><html xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; Charset = GB2312 /> <Title> One Pig </ Title> </ Head> <Body> <Div Style = Width: 400px> <div> </div> <! - -> <div style = Float: droite; Width: 400px> ↓ C'est le porc supplémentaire </div> </div> </ body> </html>

Conseil: vous pouvez d'abord modifier du code, puis exécuter le même flotteur: à droite; Dans <div style = float: à droite; largeur: 400px>. Le mot de porc supplémentaire disparaît également et la page s'affiche normalement.

<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><html xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; Charset = GB2312 /> <Title> One More Pig </ Title> </ Head> <Body> <div Style = Width: 400px> <div Style = Float: Left> </div> <! - -> <div style = width: 400px> ↓ Il s'agit du porc extra </v> </v> </odth> </html>

Astuce: vous pouvez d'abord modifier du code, puis exécuter les instructions: le débordement de texte causé par les commentaires est lié au flottement des blocs.

3. Transférer les commentaires vers l'avant de <div style = float: Left> </div>, l'excès de porc disparaît et la page s'affiche normalement.

<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><html xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; Charset = GB2312 /> <Title> One Pig </ Title> </ Head> <Body> <Div Style = Width: 400px> <! - -> <div Style = Float: Left> </div> <div Style = Float: Droite; Width: 400px> ↓ Ceci est le porc supplémentaire </div> </div> </body> </html>

Astuce: vous pouvez d'abord modifier du code, puis exécuter et transférer les commentaires vers <div style = float: droite; largeur: 400px> ↓ Il s'agit du cochon supplémentaire </div>. Le mot de porc supplémentaire disparaît également et la page s'affiche normalement.

<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><html xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; Charset = GB2312 /> <Title> One Pig </ Title> </ Head> <Body> <Div Style = Width: 400px> <div Style = Float: Left> </div> <div style = float: droite; Width: 400px> ↓ Ceci est le porc supplémentaire </div> <! - -> </v> </odody> </html>

Astuce: vous pouvez d'abord modifier du code, puis exécuter les instructions: le débordement de texte causé par les commentaires est lié à son emplacement. (Il peut être compris en conjonction avec le point 2)

4. Retirer la largeur: 400px dans <div style = float: droite; largeur: 400px>, l'excès de porc disparaît et la page s'affiche normalement.

<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><html xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; Charset = GB2312 /> <Title> One More Pig </ Title> </ Head> <Body> <div Style = Width: 400px> <div Style = Float: Left> </div> <! - -> <div style = Float: Droite;> ↓ Il s'agit du porc supplémentaire </div> </div> </ body> </html>

Astuce: vous pouvez d'abord modifier du code, puis exécuter les instructions: le débordement de texte causé par les commentaires est lié à la largeur fixe du bloc de texte (qu'il s'agisse d'une valeur absolue ou d'une valeur relative).

5. Augmenter le nombre de commentaires: Quand 1 commentaire, 1 mot apparaîtra; Lorsque 2 commentaires, 3 mots apparaîtront; Quand 3 commentaires, 5 mots apparaîtront ...

Conseil: vous pouvez d'abord modifier du code, puis l'exécuter

<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><html xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; charset = gb2312 /> <itle> un autre cochon </tapie> </ head> <body> <div style = width: 400px> <div style = float: Left> </ div> <! - -> <! - -> <div style = float: droite; width: 400px> ↓ C'est le pig </v> </v> </ody> </htm>

Conseil: vous pouvez d'abord modifier du code, puis l'exécuter

<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><html xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; charset = gb2312 /> <itle> un autre porc </ title> </ head> <body> <div style = width: 400px> <div style = float: Left> </div> <! - -> <! - -> <! - -> <div style = float: droite; width: 400px> ↓ C'est le porc supplémentaire </v> </v> </voct

Conseil: vous pouvez d'abord modifier du code, puis l'exécuter

<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><html xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; Charset = GB2312 /> <Title> Un autre porc </ title> </ head> <body> <div style = width: 400px> <div style = float: Left> </ div> <! - -> <! - -> <! - -> <! - -> <div style = float: droite; width: 400px> ↓ c'est le porc supplémentaire </v> </v> </v>

Astuce: vous pouvez d'abord modifier du code, puis l'exécuter. Nous obtiendrons une formule de la règle ci-dessus: le nombre de mots débordant de texte = le nombre de commentaires * 2-1. Le nombre de mots ici est vrai lorsqu'il y a des chiffres chinois ou anglais.

Lorsque le nombre de mots de texte débordant est supérieur au nombre de mots de texte, le bloc de texte disparaîtra.

<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><html xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; charset = gb2312 /> <itle> un autre porc </ title> </ head> <body> <div style = width: 400px> <div style = float: Left> </ div> <! - -> <! - -> <! - -> <! - -> <! - -> <! Extra Pig </div> </div> </ body> </html>

Conseil: vous pouvez d'abord modifier du code, puis exécuter les instructions: le nombre de mots débordants est lié au nombre de commentaires.

À partir des tests de 1 et 2, veuillez ne pas placer de commentaires entre 2 blocs flottants.

Solution:

1. Aucun commentaire n'est placé. La solution la plus simple et la plus rapide, hehe ...

<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><html xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; Charset = GB2312 /> <Title> One Pig </ Title> </ Head> <Body> <Div Style = Width: 400px> <div Style = Float: Left> </div> <div style = float: droite; Width: 400px> ↓ Il s'agit du porc supplémentaire </div> </div> </body> </html>

Astuce: vous pouvez d'abord modifier du code, puis exécuter 2. Ne placez pas de commentaires entre 2 blocs flottants.

<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><html xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; Charset = GB2312 /> <Title> One Pig </ Title> </ Head> <Body> <Div Style = Width: 400px> <! - -> <div Style = Float: Left> </div> <div Style = Float: Droite; Width: 400px> ↓ Ceci est le porc supplémentaire </div> </div> </body> </html>

Astuce: vous pouvez d'abord modifier du code, puis exécuter 3. Incluez le bloc de texte entre le nouveau <div> </div>, tel que: <div style = float: droite; largeur: 400px> <div> ↓ Il s'agit du cochon supplémentaire </div> </div>.

<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><html xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; Charset = GB2312 /> <Title> One More Pig </ Title> </ Head> <Body> <div Style = Width: 400px> <div Style = Float: Left> </ Div> <! - -> <div style = float: droite; width: 400px> <v> ↓ Ceci est le porc supplémentaire </div> </div> </div> </ body> </htm>

Conseil: vous pouvez d'abord modifier du code, puis exécuter 4. Supprimez la largeur fixe du bloc de texte, qui présente des similitudes avec 3.

<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><html xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; Charset = GB2312 /> <Title> One More Pig </ Title> </ Head> <Body> <div Style = Width: 400px> <div Style = Float: Left> </div> <! - -> <div style = Float: Droite;> ↓ Il s'agit du porc supplémentaire </div> </div> </ body> </html>

Astuce: vous pouvez d'abord modifier du code, puis exécuter l'analyse et la solution ci-dessus qui peuvent être inadéquates ou inexactes. Bienvenue à discuter et à me corriger.