改善IE6中a与a:hover的背景支持 -- CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> CSS/HTML --> 改善IE6中a与a:hover的背景支持

改善IE6中a与a:hover的背景支持

浏览:1980次出处信息

在IE6中背景属性加a与a:hover两者的伪类结合，在正常逻辑下为何不起作用？测试这问题存在IE6及以下浏览器，这问题我经常遇到在之前一直采用其它方法取而代之，现在找到了另一种解决。

以导航为例，下面的代码完全符合CSS的逻辑，理论上应该是”a:hove的背景图片”结合”a.nav_1的背景定位” 而得出预想的结果，但IE6却异常地只显示背景图片而没有对上背景坐标Demo（请使用IE6与IE6以上浏览器作对比）。

以下是代码片段：
    *{margin:0;padding:0;}
     .header{ position:relative; width:745px; height:225px; background:url(bg.jpg) no-repeat;}
     /*导航*/
     #nav p{ position:absolute; left:0; bottom:0; width:100%;}
     #nav a{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;content:"";}
     #nav a:hover{background:url(bg.jpg) no-repeat 0 0;}
     /*导航经过状态: IE6及以下浏览器不兼容，其它浏览器正常*/
     #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;}

之前我使用的解决方案是，再经过状态添加对应的选择符。这方法感觉代码显得比较臃肿，而对于代码洁癖的我是比较难接受的Demo。

以下是代码片段：
    /*导航经过状态: 之前的解决方案*/
     #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;}

理论上”a.nav_1″选择符比”a:hover”要高，但我尝试添加!important时测试发现IE6却显示正常Demo。

而测试其它浏览器也无副作用，这次似乎与haslayout无关了，但其产生原因与结果也却让人百思不得其解

以下是代码片段：
    /*导航经过状态：现在的解决方案*/
     #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;}

就这样第二个方案也随之而产生相比第一种解决方案更显得简洁，有更好的方法希望你能与我分享。

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：用CSS 3将我们带入下一个高度吧！

后一篇：border:none;与border:0;的区别 >>

文章信息

作者：Gulu77 来源： Gulu77
标签： hover 背景
发布时间：2009-11-20 21:00:27

建议继续学习

近3天十大热文