如果不是因为工作需要，我根本不会理会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的更多相关文章

  1. IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...

  2. win10 家庭版不支持gpedit.msc的解决办法

    win10 家庭版不支持gpedit.msc的解决办法 1.建立一个批处理文件内容如下: @echo off pushd "%~dp0" dir /b %systemroot%\W ...

  3. WCF不支持 ASP.NET 兼容性 解决办法

    错 误提示:无法激活服务,因为它不支持 ASP.NET 兼容性.已为此应用程序启用了 ASP.NET 兼容性.请在 web.config 中关闭 ASP.NET 兼容性模式或将 AspNetCompa ...

  4. IE6 验证码刷新失败显示空白解决办法

    原因:点击a标签看不清?换图片 结果验证码显示的空白! 解决办法:在对应的点击事件最后加上return false 即可解决问题. 下面是HTML源码: <p class="regis ...

  5. jsp连接mysql出现不支持认证协议的解决办法

    错误提示 com.mysql.jdbc.exceptions.MySQLNonTransientConnectionException: Client does not support authent ...

  6. MAC 系统升级10.10以后PHP验证码错误的解决办法。[ 一行代码轻松解决！ ]

    MAC 升级到10.10 以后PHP版本为5.5,初步判定是由于FreeType 字体库的原因,导致GD库有些问题,总之就是验证码出不来.很多大牛给出的办法是重新编译PHP,这对于手头有项目的人来说可 ...

  7. ie6不支持png图片的解决办法

    在head里引入png.js文件 <!--[if lte IE 6]> <script type="text/javascript" src="js/P ...

  8. [转载]tomcat的配置文件server.xml不支持中文注释的解决办法

    原文链接:http://tjmljw.iteye.com/blog/1500370 启动tomcat失败,控制台一闪而过,打开catalina的log发现错误指向了conf/server.xml,报错 ...

  9. Spring cloud Feign不支持对象传参解决办法[完美解决]

    spring cloud 使用 Feign 进行服务调用时,不支持对象参数. 通常解决方法是,要么把对象每一个参数平行展开,并使用 @RequestParam 标识出每一个参数,要么用 @Reques ...

随机推荐

  1. Calico在Kubernetes中的搭建

    一,需求 Kubernetes官方推荐的是Flannel,但是Flannel是一个overlay的网络,对性能会有一定的影响.Calico恰好能解决一下overlay网络的不足. Calico在Kub ...

  2. object-c面向对象1

    ---恢复内容开始--- 类,对象,方法,属性. 类是object-c一种重要的数据类型,是组成object-c程序的基本要素.object-c的类声明和实现包括两个部分:接口和实现部分. @inte ...

  3. Java for LeetCode 169 Majority Element

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  4. Android Session

    AsyncHttpClient保持session http://blog.csdn.net/ewrfedf/article/details/21968511

  5. Nginx与Redis解决高并发问题

    原文链接:http://bbs.phpchina.com/forum.php?mod=viewthread&tid=229629 第一版产品采用的是Jquery,Nginx,PHP(CI框架) ...

  6. svn Error: post-commit hook failed (exit code 127) with output

    Command: Commit Modified: C:\Users\xsdff\Desktop\project\index.html Sending content: C:\Users\xsdff\ ...

  7. js伪数组及转换

    什么是伪数组 能通过Array.prototype.slice转换为真正的数组的带有length属性的对象. 这种对象有很多,比较特别的是arguments对象,还有像调用getElementsByT ...

  8. 会员制实现C2B定制有机农产品，被中粮我买投资的良食网这样卖有机生鲜

    前几天,中粮我买网战略投资了位于深圳的有机生鲜自营平台良食网,宣布双方将会在供应链上展开合作.然而良食网对大家来说还是比较陌生的,为此36氪专访了良食网的创始人唐忠. 良食网成立于2011年,是一家以 ...

  9. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  10. wp8 ListPicker

    如何给selectedindex 绑定SelectedIndex="{Binding User.StationWorkFlag}"  这样写不对嘛 为何提示我 SelectedIn ...