웹 페이지 주석은 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> </title> </head> <lody> <div style = width : 400px> <div style = float : 왼쪽> </div> <!-> <div style = float : right; width : 400px> ↓ 이것은 여분의 돼지 </div> </body> </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> html xmlns = http : //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> 하나의 돼지 </title> </title> </head> <lody> <div style = width : 400px> <div> </div> <!--> <div style = float : right; width : 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> </witch> </head> <lody> <div style = width : 400px> <div style = float : 왼쪽> </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> html xmlns = http : //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> 하나의 돼지 </title> </title> </head> <body> <div style = width : 400px> <!--> <div style = float : 왼쪽> </div> <div style = float : 오른쪽; width : 400px> ↓ 이것은 여분의 돼지 </div> </body> </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> html xmlns = http : //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> 하나의 돼지 </title> </title> </head> <body> <div style = width : 400px> <div style = float : 왼쪽> </div> <div style = float : right; width : 400px> ↓ 이것은 여분의 돼지 </div> <!-> </body> </html>

팁 : 먼저 코드를 수정 한 다음 지침을 실행할 수 있습니다. 주석으로 인한 텍스트 오버플로는 해당 위치와 관련이 있습니다. (지점 2와 함께 이해 될 수 있습니다)

4. 너비 제거 : 400px <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> html xmlns = http : //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> 하나 더 돼지 </title> </witch> </head> <lody> <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> </witch> </head> <lody> <div style = width : 400px> <div style = float : 왼쪽> </div> <!-> <!-> <div style = float : right; width : 400px> </html> </html> </html>

팁 : 먼저 코드를 수정 한 다음 실행할 수 있습니다.

<! 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> </witch> </head> <lody> <div style = width : 400px> <div style = float : 왼쪽> </div> <!-> <!-> <!-> <div style = float : right; width : 400px> ↓ this the extra pig </body> </html>

팁 : 먼저 코드를 수정 한 다음 실행할 수 있습니다.

<! 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> </title> </head> <lody> <div style = width : 400px> <div style = float : 왼쪽> </div> <!-> <!-> <!--> <!->-> <div style = float : right; width : 400px> </div> </ht ml>

팁 : 먼저 코드를 수정 한 다음 실행할 수 있습니다. 위의 규칙에서 공식을 얻을 것입니다. 텍스트가 넘치는 단어의 수 = 주석 수 * 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> </witch> </head> <lody> <div style = width : 400px> <div style = float : left> </div> <!-> <!-> <! --->-->-> <!-> <!-> <!-> ----> <!-> <Div Style =; 여분의 돼지 </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> html xmlns = http : //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> 하나의 돼지 </title> </title> </head> <lody> <div style = width : 400px> <div style = float : 왼쪽> </div> <div style = float : right; width : 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> </title> </head> <body> <div style = width : 400px> <!--> <div style = float : 왼쪽> </div> <div style = float : 오른쪽; width : 400px> ↓ 이것은 여분의 돼지 </div> </body> </html>입니다.

팁 : 먼저 일부 코드를 수정 한 다음 3을 실행할 수 있습니다. <divy 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> html xmlns = http : //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> 하나 더 돼지 </title> </witch> </head> <lody> <div style = width : 400px> <div style = float : 왼쪽> </div> <!-> <div style = float : 오른쪽; width : 400px> <divth : 400px> </div> </html> </html> </html> </html.

팁 : 먼저 일부 코드를 수정 한 다음 4를 실행할 수 있습니다. 텍스트 블록의 고정 너비를 제거합니다.

<! 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> </witch> </head> <lody> <div style = width : 400px> <div style = float : left> </div> <!-> <div style = float;> ↓ 이것은 여분의 돼지입니다 </div> </div> </body> </html>

팁 : 먼저 일부 코드를 수정 한 다음 부적절하거나 부정확 할 수있는 위의 분석 및 솔루션을 실행할 수 있습니다. 저를 토론하고 수정하는 데 오신 것을 환영합니다.