Why does the pseudo-class combination of background attribute plus a and a:hover not work under normal logic in IE6? I tested that this problem exists in IE6 and below browsers. I often encountered this problem and used other methods to replace it. Now I have found another solution.
Take navigation as an example. The following code is completely in line with the logic of CSS. In theory, it should be " a:hove background image " combined with "a.nav_1 background positioning" to get the expected result. However, IE6 abnormally only displays the background image. There is no background coordinate Demo (please use IE6 and IE6 or above browsers for comparison).
*{margin:0;padding:0;}
.header{ position:relative; width:745px; height:225px; background:url(bg.jpg) no-repeat;}
/*navigation*/
#nav p{ position:absolute; left:0; bottom:0; width:100%;}
#nav a{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav a:hover{background:url(bg.jpg) no-repeat 0 0;}
/*Navigation status: IE6 and below browsers are not compatible, other browsers are normal*/
#nav a.nav_1{width:80px;background-position:0 -213px;}
#nav a.nav_2{width:86px;background-position:-80px -213px;}
#nav a.nav_3{width:227px;background-position:-166px -213px;}
#nav a.nav_4{width:92px;background-position:-393px -213px;}
#nav a.nav_5{width:98px;background-position:-485px -213px;}
#nav a.nav_6{width:162px;background-position:-583px -213px;}
The solution I used before was to add the corresponding selector through the state. This method feels that the code seems bloated, and as a code freak, it is difficult for me to accept the demo .
/*Navigation passing status: previous solution*/
#nav a.nav_1:hover,
#nav a.nav_1{width:90px;background-position:0 -211px;}
#nav a.nav_2:hover,
#nav a.nav_2{width:86px;background-position:-80px -213px;}
#nav a.nav_3:hover,
#nav a.nav_3{width:227px;background-position:-166px -213px;}
#nav a.nav_4:hover,
#nav a.nav_4{width:92px;background-position:-393px -213px;}
#nav a.nav_5:hover,
#nav a.nav_5{width:98px;background-position:-485px -213px;}
#nav a.nav_6:hover,
#nav a.nav_6{width:162px;background-position:-583px -213px;}
Theoretically, the "a.nav_1" selector is higher than "a:hover", but when I tried to add !important, I found that IE6 displayed the normal Demo .
There are no side effects when testing other browsers. This time it seems to have nothing to do with haslayout, but its causes and results are also puzzling.
/*Navigation passing status: current solution*/
#nav a.nav_1{width:80px;background-position:0 -211px!important;}
#nav a.nav_2{width:86px;background-position:-80px -213px!important;}
#nav a.nav_3{width:227px;background-position:-166px -213px!important;}
#nav a.nav_4{width:92px;background-position:-393px -213px!important;}
#nav a.nav_5{width:98px;background-position:-485px -213px!important;}
#nav a.nav_6{width:162px;background-position:-514px -213px!important;}
The solution provided by ytzong is very good~ It seems that not using background abbreviations still has its advantages. There is indeed a problem with the logic of background addition in IE6. I have also tested the border attribute and the Demo does not have this problem.
*{margin:0;padding:0;}
.header{ position:relative; width:745px; height:225px; background:url(bg.jpg) no-repeat;}
/*navigation*/
#nav p{ position:absolute; left:0; top:180px; width:100%;}
#nav pa{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav pa:hover{background-image:url(bg.jpg); background-repeat:no-repeat;}
/*Navigation status: IE6 and below browsers are not compatible, other browsers are normal*/
#nav p a.nav_1{width:80px;background-position:0 -213px;}
#nav p a.nav_2{width:86px;background-position:-80px -213px;}
#nav p a.nav_3{width:227px;background-position:-166px -213px;}
#nav p a.nav_4{width:92px;background-position:-393px -213px;}
#nav p a.nav_5{width:98px;background-position:-485px -213px;}
#nav p a.nav_6{width:162px;background-position:-583px -213px;}
I don’t know if there is a better way~