FAQ about replacing elements in IE browser

Replacement elements have many problems in IE browsers. For example, replacing the Row Height of elements is one of the difficulties. Of course, there is also the margin inheritance bug of form Element textarea. OK. I will introduce a few more today, A basket is full.

Replacement element and A label
Scenario:
Picture (replacement element) in IE6, A label, hidden by default, hover display

Html:

<A href = "#">

</A>
CSS
A img {display: none}/* use visibility */
A: hover img {display: block ;}

Symptom:
Ie6 and hover cannot normally display images in tag.

Solution:

HasLayout of the a tag is triggered during hover.
A: hover {
_ Zoom: 1;
}
Add class using JS scripts
Demo: demo1

Replacement element and position
Add a container to the img based on the previous settings, set the position, hide by default, and display the hover

Html:

<A href = "#">
<Span>

</Span>
</A>
Css:

A {position: relative}
A span {position: absolute; display: none ;}
A: hover span {display: block ;}

Symptom:
Ie6 and hover cannot normally display the images in tag a. The hasLayout function is triggered to display the images, but it cannot be hidden again.

Demo: demo2

Solution:

Use visibility instead of display
Clears the position of a span element.
Script
A more extreme example: The IE 'non-disappearing content' bug

Image and hasLayout
In the same example, if the span element of the img container is triggered by hasLayout, the link fails in IE6/7 browser (image area)

Html:

<A href = "#">
<Span>

</Span>
</A>
Css

A span {display: inline-block}/* float, absolute, and zoom */

Symptom:
Invalid image region Link

Demo: demo3

Solution:

Restore the hasLayout of the span container
Try not to adopt such Layout