Комментарии веб -страницы генерируют переполнение текста в 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><html xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> Еще одна свинья </title> </head> <body> <div style = width: 400px> <div style = float: left> </div> <!---> <div style = float: справа; ширина: 400px> ↓ Это дополнительная свинья </div> </div> </body> </html>

Совет: сначала вы можете изменить какой -то код, а затем запустить 1. Тест в IE и FF, и только переполнение текста происходит в IE.

Примечание. Переполнение текста, вызванное комментариями, является ошибкой IE.

2. Удалите поплавок: слева; В <div style = float: слева> </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> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> одна свинья </title> </head> <body> <div style = width: 400px> <div> </div> <!---> <div style = float: справа; ширина: 400px> ↓ Это дополнительная свинья </div> </div> </body> </html>

Совет: сначала вы можете изменить какой -то код, а затем запустить один и тот же поплавок: справа; В <div style = float: справа; ширина: 400px>. Дополнительное свиновое слово также исчезает, и страница отображается нормально.

<! 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> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> Еще одна свинья </title> </head> <body> <div style = width: 400px> <div style = float: left> </div> <!---> <div style = width: 400px> ↓ Это дополнительная свинья </div> </div> </body> </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><html xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> одна свинья </title> </head> <body> <div style = width: 400px> <!---> <div style = float: left> </div> <div style = float: справа; ширина: 400px> ↓ Это дополнительная свинья </div> </div> </body> </html> ↓ Это дополнительная свинья </div> </div> </body> </html> ↓ Это дополнительная свинья </div> </div> </body> </html>.

Совет: сначала вы можете изменить какой -то код, а затем запустить и перенести комментарии на <div style = float: справа; ширина: 400px> ↓ Это дополнительная свинья </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> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> одна свинья </title> </head> <body> <div style = width: 400px> <div style = float: left> </div> <div style = float: справа; ширина: 400px> ↓ Это дополнительная свинья </div> <!-> </div> </body> </html>.

Совет: сначала вы можете изменить какой -то код, а затем запустить инструкции: переполнение текста, вызванное комментариями, связано с его местоположением. (Это можно понять в сочетании с точкой 2)

4. Удалите ширину: 400px в <div style = float: right; ширина: 400px>, избыточное свиновое слово исчезает, и страница отображается нормально.

<! 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> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> еще одна свинья </title> </head> <body> <div style = width: 400px> <div style = float: left> </div> <!---> <div style = float: справа;> ↓ Это дополнительная свинья </div> </div> </body> </html>

Совет: сначала вы можете изменить какой -то код, а затем запустить инструкции: переполнение текста, вызванное комментариями, связано с фиксированной шириной текстового блока (будь то абсолютное значение или относительное значение).

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><html xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> Еще одна свинья </title> </head> <body> <div style = width: 400px> <div style = float: left> </div>  <div style = float: right; ширина: 400px> ↓ Это дополнительная свинья </div> </div> </body> </html> is is the office pig </div> </div> </html>.

Совет: сначала вы можете изменить код, а затем запустить его

Совет: сначала вы можете изменить код, а затем запустить его. Мы получим формулу из приведенного выше правила: количество слов переполненных текста = количество комментариев * 2-1. Количество слов здесь верно, когда есть китайские или английские цифры.

Когда переполненное количество текстовых слов больше, чем количество текстовых слов, текстовый блок исчезнет.

<! 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> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> Еще одна свинья </title> </head> <body> <div style = width: 400px> <div style = float: left> </div>   <!-> <!-> <!-> <!-> <! Дополнительная свинья </div> </div> </body> </html>

Совет: сначала вы можете изменить какой -то код, а затем запустить инструкции: количество переполненных слов связано с количеством комментариев.

Из тестов 1 и 2, пожалуйста, не размещайте комментарии между 2 плавающими блоками.

Решение:

1. Комментарии не размещены. Самое простое и быстрое решение, хе -хе ...

<! 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> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> одна свинья </title> </head> <body> <div style = width: 400px> <div style = float: left> </div> <div style = float: справа; ширина: 400px> ↓ Это дополнительная свинья </div> </div> </body> </html> ↓.

Совет: сначала вы можете изменить какой -то код, а затем запустить 2. Не размещайте комментарии между 2 плавающими блоками.

<! 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> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> одна свинья </title> </head> <body> <div style = width: 400px> <!---> <div style = float: left> </div> <div style = float: справа; ширина: 400px> ↓ Это дополнительная свинья </div> </div> </body> </html> ↓ Это дополнительная свинья </div> </div> </body> </html> ↓ Это дополнительная свинья </div> </div> </body> </html>.

Совет: сначала вы можете изменить какой -то код, а затем запустить 3. Включите текстовый блок между новым <div> </div>, например: <div style = float: right; ширина: 400px> <div> ↓ Это дополнительная свинья </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> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> Еще одна свинья </title> </head> <body> <div style = width: 400px> <div style = float: left> </div> <!---> <div style = float: справа; ширина: 400px> <div> ↓ Это дополнительная свинья </div> </div> </div> </html> </html> </html> </html> </html> </html> </html> </html.

Совет: сначала вы можете изменить какой -то код, а затем запустить 4. Удалить фиксированную ширину текстового блока, который имеет сходство с 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> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> еще одна свинья </title> </head> <body> <div style = width: 400px> <div style = float: left> </div> <!---> <div style = float: справа;> ↓ Это дополнительная свинья </div> </div> </body> </html>

Совет: сначала вы можете изменить какой -то код, а затем запустить приведенный выше анализ и решение, которое может быть неадекватным или неточным. Добро пожаловать, чтобы обсудить и исправить меня.