如果不是因为工作需要，我根本不会理会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. python时间转换

    #设a为字符串 import time a = "2011-09-28 10:00:00" #中间过程,一般都需要将字符串转化为时间数组 time.strptime(a,'%Y-% ...

  2. CStringUtf8ToUnicode

    CString CStringUtf8ToUnicode( CString Utf8 ) { int wLen = 0; CString strUnicode; LPSTR pBufChar = NU ...

  3. 一、HTML和CSS基础--HTML+CSS基础课程--第5部分

    第九章 CSS盒模型 元素分类
: 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的 ...

  4. MVC系统学习3—ModelBinder

    在ASP.NET MVC中,每个请求都被映射到一个Action方法,我们可以在action的方法中定义相应类型的参数,View中通过post.get方式提交的request参数,只要名称一致就会对应到 ...

  5. C#对XML进行操作（添加、修改）

    XML文档内容如下: <?xml version="1.0" encoding="utf-8"?> <root> <first i ...

  6. oracle 10g 学习之数据进行增删改查、数据库事务、约束（8）

    目标 通过本章学习,您将可以: l  使用 DML 语句 l  向表中插入数据 l  更新表中数据 l  从表中删除数据 l  控制事务 l  描述约束 l  创建和维护约束 数据控制语言 l     ...

  7. 完美搞定《DOCKER IN ACTION》第二章示例

    起来!!!命令如下: 建立第一个web docker docker run --detach --name web nginx:latest 建立第二个web_test docker docker r ...

  8. duilib WindowImplBase BUG修复 --- 按一次ESC键, 关闭多个窗口

    BUG造成的影响 继承自WindowImplBase的窗口类, 如果没有重写重写ResponseDefaultKeyEvent而由WindowImplBase默认处理的话, 会导致按一次有ESC键, ...

  9. 没有注册类 (异常来自 HRESULT:0x80040154 (REGDB_E_CLASSNOTREG))

    解决办法:在项目属性里设置“生成”=>“目标平台”为x86而不是默认的ANY CPU.

  10. PHP 文件上传类

    FileUpload.;                $];                $_newname = date(,). :                             To ...