Direct code:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>One more pig</title> </head> <body> <div style="width:400px"> <div style="float:left"></div> <div style="float: right; width: 400px">↓ This is the extra pig</div> </div> </body> </html>
1. Test in IE and FF, only in IE Text overflow Phenomenon. Note: The text overflow caused by comments is a bug of IE.
2. Remove the "float: left;" in<div style="float: left"></div>, you will find that the extra "pig" character is missing, and the page displays normally. Similarly, remove the "float: right;" in<div style="float: right; width: 400px"></div>, and the extra "pig" character also disappears. The normal display of the page indicates that text overflow caused by comments is related to the floating of blocks. 3. Move the comment to the front of div style="float: left"></div>, and the redundant "pig" disappears. The page will display normally. Move the comment to the bottom of div style="float: right; width: 400px" ↓↓ This is the extra pig. The redundant "pig" also disappears, and the page will display normally. Note: Text overflow caused by notes is related to its position. (It can be understood in combination with point 2)
4. Remove the "width: 400px" in<div style="float: right; width: 400px"></div>, the redundant "pig" characters disappear, and the normal display of the page indicates that the text overflow caused by comments is related to the fixed width of the text block (whether absolute or relative).
5. Increase the number of notes: when there is one note, one more word will be added; When there are two notes, three more words will be added; When there are three notes, five more words will be added... We will get a formula from the above rule: the number of words overflowing=the number of notes * 2-1, and the number of words here is valid for both Chinese and English numbers. When the number of overflowing words is greater than the number of words in the text, the text block will disappear. Note: The number of overflow words is related to the number of notes. According to the test of 1 and 2, the note should not be placed between two floating blocks.
Solution:
1. Do not place notes. The simplest and fastest solution, hey hey
2. Notes should not be placed between two floating blocks.
3. Include the text block between the new div, for example, div style="float: right; width: 400px". 4. Remove the fixed width of the text block, which is similar to 3. Follow up discussion: If the format of comments is like this, there will be no problem Put your commentary in here…＜!–＞ Later, I found that other articles mentioned that input of type=hidden and div of display: none would also lead to text overflow. BUGs with DOCTYPE in IE7 would not benefit.
