首页 >web前端 >html教程 >IE9中导航菜单位置跑偏（位置不准）问题_html/css_WEB-ITnose

IE9中导航菜单位置跑偏（位置不准）问题_html/css_WEB-ITnose

WBOY原创: 2016-06-24 12:12:361349浏览

css样式如下：
#menuspan ul { list-style: none; margin:0px; padding: 0px; }
#menuspan ul li { float:left; margin-left:2px;}
#menuspan ul li a { display:block; width:86px; height:28px; line-height:28px; text-align:center; background:url(/images/redimg/tabuncheck.jpg) 0 0 no-repeat; font-size:14px; color:white;}
#menuspan ul li a:hover { background:url(/images/redimg/tabchecked.jpg) 0 0 no-repeat;color:black;}
#menuspan ul li a#current { background:url(/images/redimg/tabchecked.jpg) 0 0 no-repeat; font-weight:bold; color:black;}
#menuspan ul li ul { border:0px; display:none;position:absolute;}
#menuspan ul li ul li {clear:both; width:86px; background:url(/images/redimg/tabuncheck.jpg) 0 0 no-repeat; margin:0px;}
#menuspan ul li ul li a {background:none;}
#menuspan ul li ul li a:hover { background:url(/images/redimg/tabchecked.jpg) 0 0 no-repeat; color:black;}
#menuspan ul li:hover ul {display:block;}
#menuspan ul li.sfhover ul {display:block;}
js代码如下：
function menuFix() {
var sfEls = document.getElementById("menuspan").getElementsByTagName("li");
for (var i=0; i sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
}
}
}
问题描述：
1.除了ie9，其他各种浏览器都能正常显示。
2.在ie9中，子菜单的位置经常向后错一个菜单模块。但是有时候又能正常显示。
3.我觉得是#menuspan ul li ul { border:0px; display:none;position:absolute;}的问题，但是也不知道如何修改。