IE6中背景属性加a与a:hover问题


在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;}
#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;}

ytzong 提供的解决方法很不错赞~, 看来不使用背景缩写还是有它的好处。IE6在背景相加的逻辑上的确是有问题,同样测试过border属性则不存在这问题Demo

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

不知道还没有更好的方法呢~



相关阅读:
把Red Hat 7.0内核升级到2.4
如何手工创建(Create)一个Oracle 10g数据库
用函数简化你的字符串连接语句
模仿OSO的论坛(三)
原创]asp获取URL参数的几种方法分析总结" target="_blank">[原创]asp获取URL参数的几种方法分析总结
将MySQL 移植到Oracle ——第二部分
XHTML教程:针对初学者的XHTML基础
SQL高手篇:精典SQLFAQ收藏
win7下如何删除多余选项的右键新建菜单项
终端下vim汉字显示不正常的解决办法
Firefox 3.0版挑战IE 浏览器大战在即
安全配置IIS防止数据库下载
FreeBSD下也有“看门人”--浅谈tcpwrapper的基本使用方法
EasyTools分页控件详解
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4