简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  The navigation menu position deviation (inaccurate position) problem in IE9_html/css_WEB-ITnose

The navigation menu position deviation (inaccurate position) problem in IE9_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:12:361313browse

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;}的问题，但是也不知道如何修改。


回复讨论(解决方案)

ni 你设置ul li的margin:0;padding:0;试试

 你总的写点测试代码吧。。。就css和js。。怎么可能知道什么原因啊



The above paragraph is the menu code. Sorry, the code indentation is not very good because it uses jsp. Print the source code of the output.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to display the switch panel part below when playing a swf file in html? _html/css_WEB-ITnoseNext article：How to display the switch panel part below when playing a swf file in html? _html/css_WEB-ITnose

Related articles

See more