IE6不支持li:hover的解决办法,一句代码让IE6支持li:hover
如果不是因为工作需要,我根本不会理会IE6的兼容问题,甚至我都不想理会IE的所有内核,不过IE9用了下,我还是重新对IE报以期待的。话题扯远了,下面回到话题上来吧。
这次要说的内容就是,如果让IE支持li:hover(还有之类的span:hover、div:hover),用过的都应该差不多清楚,IE6只能识别a:hover,但有时候用UL、LI做下拉列表,IE6就一直让我很头疼。
有人用的解决办法可能第一反应就是去网上找相关的JS来代替hover,其实有个超级简单的方法,就是在LI标记里加一个A标记,然后定义这个A标记为display:block即可,然后就可以把这个A标记宽高设置和LI一样,这样就很兼容IE6了,演示代码如下:
<ul>
<li><a href="#" style="display:block">栏目一</a></li>
<li><a href="#" style="display:block">栏目二</a></li>
<li><a href="#" style="display:block">栏目三</a></li>
</ul>
当然了,还有其他别的方法,连代码都不用写,只需引用一个文件就行:csshover.htc(下载地址:http://www.xs4all.nl/~peterned/htc/csshover3.htc,如果失效,自行百度)
下载好后,只需在代码的<head></head>中间添加下面这段代码,然后就放心大胆的去使用hover吧(也支持focus):
<!--[if lte IE 6]>
<style type="text/css">
body { behavior:url("csshover.htc"); }
</style>
<![endif]-->
我个人还是推荐第二种方法,当然在没有条件允许的情况下,第一种还是比较实用的,毕竟存着一个文件不如牢记于心一种解决办法,这样随时可以用键盘敲出来并解决问题。
最后再发自内心说一句话:赶快放弃IE6和XP吧,我们做网页的很累啊。
/*第二种js*/
JS代码:
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover =function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>
导航结构代码
<ul id="nav">
<li><a href="#">这是显示的标题1</a>
<ul>
<li><a href="#">这是列表中的内容1</a></li>
<li><a href="#">这是列表中的内容2</a></li>
<li><a href="#">这是列表中的内容3</a></li>
<li><a href="#">这是列表中的内容4</a></li>
</ul>
</li>
<li><a href="#">这是显示的标题2</a>
<ul>
<li><a href="#">这是列表中的内容5</a></li>
<li><a href="#">这是列表中的内容6</a></li>
<li><a href="#">这是列表中的内容7</a></li>
<li><a href="#">这是列表中的内容8</a></li>
</ul>
</li>
</ul>
CSS样式代码
#nav, #nav ul{ /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav li{ /* all list items */
float: left;
width: 10em;
}
#nav li ul{ /* second-level lists */
position: absolute;
background: orange;
width: 10em;
left:
-999em; /* using left instead of display to hide menus because display:
none isn't read by screen readers
这里用left:-999em的也行,用display:none的也行,看您喜欢用啥 */
}
*+ html #nav li ul{margin: 16px 0 0 -95px;} /* 二级菜单显示位置调整IE7 */
*html #nav li ul{margin: 16px 0 0 -95px;} /* 二级菜单显示位置调整 IE6 */
#nav li:hover ul, #nav li.sfhover ul{
left: auto;/* 如果上面用left的了,那么这就不用改,最多改个数,如果用display:none了,那么这里改成display:block*/
}
IE6不支持li:hover的解决办法,一句代码让IE6支持li:hover的更多相关文章
- IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...
- win10 家庭版不支持gpedit.msc的解决办法
win10 家庭版不支持gpedit.msc的解决办法 1.建立一个批处理文件内容如下: @echo off pushd "%~dp0" dir /b %systemroot%\W ...
- WCF不支持 ASP.NET 兼容性 解决办法
错 误提示:无法激活服务,因为它不支持 ASP.NET 兼容性.已为此应用程序启用了 ASP.NET 兼容性.请在 web.config 中关闭 ASP.NET 兼容性模式或将 AspNetCompa ...
- IE6 验证码刷新失败显示空白解决办法
原因:点击a标签看不清?换图片 结果验证码显示的空白! 解决办法:在对应的点击事件最后加上return false 即可解决问题. 下面是HTML源码: <p class="regis ...
- jsp连接mysql出现不支持认证协议的解决办法
错误提示 com.mysql.jdbc.exceptions.MySQLNonTransientConnectionException: Client does not support authent ...
- MAC 系统升级10.10以后PHP验证码错误的解决办法。[ 一行代码轻松解决! ]
MAC 升级到10.10 以后PHP版本为5.5,初步判定是由于FreeType 字体库的原因,导致GD库有些问题,总之就是验证码出不来.很多大牛给出的办法是重新编译PHP,这对于手头有项目的人来说可 ...
- ie6不支持png图片的解决办法
在head里引入png.js文件 <!--[if lte IE 6]> <script type="text/javascript" src="js/P ...
- [转载]tomcat的配置文件server.xml不支持中文注释的解决办法
原文链接:http://tjmljw.iteye.com/blog/1500370 启动tomcat失败,控制台一闪而过,打开catalina的log发现错误指向了conf/server.xml,报错 ...
- Spring cloud Feign不支持对象传参解决办法[完美解决]
spring cloud 使用 Feign 进行服务调用时,不支持对象参数. 通常解决方法是,要么把对象每一个参数平行展开,并使用 @RequestParam 标识出每一个参数,要么用 @Reques ...
随机推荐
- SQL Server游标的使用
转: http://www.cnblogs.com/moss_tan_jun/archive/2011/11/26/2263988.html 游标是邪恶的! 在关系数据库中,我们对于查询的思考是面向集 ...
- 如何让你的scrapy爬虫不再被ban
前面用scrapy编写爬虫抓取了自己博客的内容并保存成json格式的数据(scrapy爬虫成长日记之创建工程-抽取数据-保存为json格式的数据)和写入数据库(scrapy爬虫成长日记之将抓取内容写入 ...
- swift 中delegate的使用
今天写了delegate,遇到以下问题: 这里protocol的写法有问题,如果delegate指向一个实现了某个协议对象的引用,在oc里是这样写delegate的类型 id<protocol& ...
- Android 和iOS中 View的滚动
在最近的程序中用到了Android中的View的滚动,记录一下,待总结.
- Light OJ 1253 Misere Nim (尼姆博弈(2))
LightOJ1253 :Misere Nim 时间限制:1000MS 内存限制:32768KByte 64位IO格式:%lld & %llu 描述 Alice and Bob ar ...
- AU版有锁机的福利,704越狱彻底解决+86问题,完美IM/FT,重启不掉APN设置
http://bbs.25pp.com/thread-172881-1-1.html 串号99的是au版 串号013的是sb版 44050 AU为 找到咱们SB版的文件,为44020 http:/ ...
- jQuery常规选择器
//简单选择器$('div').css('color','red'); //元素选择器,返回多个元素$('#box').css('color','red');//id选择器,返回单个元素$('.box ...
- Fresco 源码分析(一) DraweeView-DraweeHierarchy-DraweeController(MVC) DraweeHierachy+DraweeController的分析
4.1.5.2 模型层DraweeHierachy继承体系以及各个类的作用 DraweeHierachy (I) --| SettableDraweeHierarchy (I) ------| Gen ...
- Quartus signal tapii 的使用
此功能原来已经试验过,没有笔记.这次复习巩固下. 使用PLL 的程序. 1.新建signaltap ii 文件 注意以下几个地方,会用到 添加采样时钟 . 添加采样信号: 完成之后,编译下载 运行 两 ...
- java基础知识回顾之javaIO类总结
java IO体系图 IO流的操作规律总结: 1,明确体系: 数据源:InputStream ,Reader 数据汇:OutputStream,Writer 2,明确数据:因为数据分两种:字节,字符. ...