IE6 "hide-and-go" bug [ghost text]

Solution:

If ($. browser. MSIE & parseint ($. browser. Version) <7) {// IE6 hide-in event
VaR html = _. template (TPL, {items: obj. itemarray}) + '<Div style = "clear: Both; font-size: 0; Height: 0;"> </div> ';
}
Else {
VaR html = _. template (TPL, {items: obj. itemarray });
}

 

 

Original article address:

Http://hi.baidu.com/821402834/item/ed609025fa2a04dda417b622

Problem reproduction condition:

1. A container contains two sub-containers with the "float" style.

2. The width of the second container is greater than the width of the parent container, or the width of the parent container minus the width of the second container is less than 3 (note that it is less than 3, when it is equal to 3, duplicate text is not displayed ).

3. There is a comment before the second container

4. The number of extra texts is related to the number of comments.

Number of extra texts = number of comments * 2-1

When the number of more words exceeds the number of words in the container, the more words disappear.

Code:

<Div style = "width: 400px; Height: 200px;">

<Div style = "float: Left; Background: red;"> </div>

<! ---->

<Div style = "float: Left; width: 405px; Background: Blue;"> repeated text test </div>

</Div>

Solution:

1,Do not write comments (simple and effective methods, but reduce code readability)

2,Add HTML comments <! ----> ChangeIE comments<! -- [If! IE]> here is the comment [endif] -->

Or annotations are not placed between two floating blocks.

3,Add one or more <Div style = "clear"> </div> behind the second container.

Clear style:

. Clear {clear: Both; font-size: 0; Height: 0 ;}

Clear: Both and Height: 0 are the font-size values that must be written. (We recommend that you do not write them. Because in IE6, div has a default height, which fixes the old bug but leads to a new bug, the default IE6 height bug must be fixed)

To solve the problem above, you can write

Statement 1: <Div style = "clear: Both; Height: 0;"> <! ----> </Div>

Statement 2: <Div style = "clear: Both; Height: 0; font-size: 0; overflow: hidden;"> </div>

4,Set the DIV width. For condition 2, this bug can be eliminated if the width of the second div is not greater than that of the parent container, or if the width of the second container is not less than 3, however, this will affect the layout.

5,Place text blocks in new containers (this solution is good and you don't need to fix this bug intentionally)

<Div style = "float: Left; width: 405px; Background: Blue;"> <div> repeated text test </div>

<Div style = "float: Left; width: 405px; Background: Blue;"> <span> repeated text test </span> </div>