改善IE6中a与a:hover的背景支持
作者:gulu77 来源:gulu77博客 发布时间:2009-11-27 18:50:00
标签:IE6,a,hover,背景
在IE6中背景属性加 a 与 a:hover 两者的伪类结合,在正常逻辑下为何不起作用?测试这问题存在IE6及以下浏览器,这问题我经常遇到在之前一直采用其它方法取而代之,现在找到了另一种解决。
以导航为例,下面的代码完全符合CSS的逻辑,理论上应该是“a:hove背景图片”结合“a.nav_1的背景定位” 而得出预想的结果,但IE6却异常地只显示背景图片而没有对上背景坐标
Demo:pseudo_classes_background_demo1.html (请使用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;}
之前我使用的解决方案是,再经过状态添加对应的选择符。这方法感觉代码显得比较臃肿,而对于代码洁癖的我是比较难接受的 。
/*导航经过状态: 之前的解决方案*/
#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却显示正常 。
而测试其它浏览器也无副作用,这次似乎与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属性则不存在这问题。
*{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;}
不知道还没有更好的方法呢~
0
投稿
猜你喜欢
- 在网站建设中,分类算法的应用非常的普遍。在设计一个电子商店时,要涉及到商品分类;在设计发布系统时,要涉及到栏目或者频道分类;在设计软件下载这
- 很早之前就在PJ的blog上看到可以用VS2005调试ASP程序,但是没有写出具体的步骤,后来一次偶尔也让我找到了方法,但是一直没把它写出来
- 【原文地址】 Tip/Trick: How to upload a .SQL file to a Hoster and
- 使用本文给出的方法就可以制作出一个简单的rss阅读器了。用xmldom方法打开xml文件,如果是本地的没有问题,就是用Server.MapP
- 根据Nicholas的说法,有四种代码会拖慢脚本的运行,并最终导致脚本失控。分别是次数过多的同步循环、庞大的函数体、不恰当的递归和不合理的D
- 喜欢Gucci的优雅吗?或者痴迷美国普普艺术?谷歌中国最近改版的谷歌个性化首页iGoogle集中了近1500个主题,包括近120多位全球顶级
- 不知道做网络程序的朋友是否重视COOKIES作用域对于多域名或 主域与WWW二级域名同时共用一站点,设置Cookies的作用域,让整个网站用
- 下表列出 SQL Server 查询分析器提供的所有键盘快捷方式。活动 快捷方式 书签:清除所有书签。 CTRL-SHIFT-F2
- 传统来说,大家在CSS中使用的颜色要么是16进制格式,要么是rgb格式,就像rgb(171,205,239)。CSS3带来了一些新的处理颜色
- 本程序有两文件test.asp 和tree.asp 还有一些图标文件 1。test.asp 调用类生成树 代码如下<%@
- 本文介绍了使用Application来统计访问网站的在线人数的方法,并介绍了使用Application时应该注意的事项。首先讲明白,用ASP
- 在JavaScript开发中,被人问到:null与undefined到底有啥区别?一时间不好回答,特别是undefined,因为这涉及到un
- tbody 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。tbody 元素应该与&
- 概要:Oracle关系数据库系统以其卓越的性能获得了广泛的应用,而保证数据库的安全性 是数据库管理工作的重要内容。本文是笔者在总结Oracl
- 要使数据库具备更强的抵御侵犯的能力,你要采取几步措施。有些措施只是良好的服务器管理的一部分,如拥有SQL Server最新的补丁,其他则包括
- HTML5,被传为Flash 的杀手,是一种用于web 应用程序开发、具有变革意义的网络技术。HTML 5提供了一些新的元素和属性,其中有些
- 当“ 页面重构工程师 ”这个职位的面试官也蛮长一段时间了,跟前两年比起来,总的来说来应聘的同学能力在很大程度上有了提高,记得两年前的一场招聘
- Set objTextStream=FileSystemObject.CreateTextFile(Filename,[Overwrite]
- 讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么。在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面
- 负责为网页编程语言提供标准化服务的W3C组织(World Wide Web Consortium)近日开始修改超文本标记语言的定义,计划为该