When it comes to the mechanism for processing CSS, IE always has a lot of things that make people vomit blood, but they are still happy with their current improvements.
Take the support for pseudo-class:hover as an example. IE7+ finally added support for tags other than a. Of course, we should applaud such improvements, but under IE6, :hover’s support for a is not so satisfactory. The following is a problem I want to briefly talk about:hover in IE6 and earlier browsers.
Many people may already know some problems with :hover in IE6 and earlier browsers (hereinafter referred to as IE6-). I mainly want to talk about issues like a:hover span{}.
Sometimes in order to add some simple dynamic effects, we often use :hover to help. For example, we often change the color of text when the mouse passes over a link. like:
Yes, this will work in all browsers. But if you change it to this:
You will find that nothing happens under IE6-, our styles are invalid. Yes, that's it. Many people should have encountered this problem and solved it.
Yes, you only need to add another a:hover{} style to solve this problem, which can contain zoom, padding, margin and other attributes. as follows:
Seeing that the normal effect was restored, I thought about what might have caused the :hover failure. You can use zoom, display, padding and other attributes to do it, so I thought it might be because of haslayout. Well, that's probably the case. But if you continue to test, you will find that no matter what attributes you write in a:hover{}, such as color, font-size, overflow (even attributes that do not exist, such as xx:yyy), you can restore it. normal.
Do you feel a little stunned after testing it here? Yes, I am like that too. As for the reason, I don't know yet, maybe someone knows.
a:hover{zoom:1;}
a:hover em{color:#F00;}
<a href="?">Change my <em>color</em></a> on mouseover
a:hover em{color:#F00;}
<a href="?">Change my <em>color</em></a> on mouseover
a:hover{color:#F00;}
<a href="?">Change my color on mouseover</a>