li:hover在ie6下是无效的,它只在ie7以下版本有效.要解决这个问题有两个解决方法.一个是用js来解决,但是这种方法我不喜欢,因为它必需把js代码和css代码都放在html文件中.第二种是在每个li外面包裹一个 加了IE6条件注释的 用A包裹了的table
类似于:
HTML code
<!--[if lte IE
6]>
<a><table><tr><td>
<![endif]-->
<li>xxxxxxxxxx</li>
<!--[if
lte IE
6]>
</td></tr></table></a>
<![endif]-->
js方法的代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>by commy </title>
<script
language="javascript">
stuHover = function() {
var cssRule;
var
newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
{
cssRule = document.styleSheets[i].rules[x];
if
(cssRule.selectorText.indexOf("LI:hover") != -1)
{
newSelector =
cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
}
}
var getElm =
document.getElementById("nav").getElementsByTagName("LI");
for (var i=0;
i<getElm.length; i++) {
getElm[i].onmouseover=function() {
this.className+=" iehover";
}
getElm[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp(" iehover\b"),
"");
}
}
}
if (window.attachEvent) window.attachEvent("onload",
stuHover);
</script>
<style type="text/css">
li:hover {
background:#00CC00; display:block; }
</style>
</head><body
>
<div
id="nav">
<ul><li>让IE6支持li:hover的JS代码</li></ul>
</div>
</body>
</html>