在我正在建设的网站上，我有一个导航系统，部分是由不是我的代码构建的（这使得事情在某些方面变得容易，而在其他方面令人沮丧）。它在所有浏览器和我之前使用过的所有网站上运行良好，除了这个，在Internet Explorer中。我正在使用IE10，并且在其他版本中没有简单的测试方法。
奇怪的是，当我创建一个有问题的代码的JSFiddle（http://jsfiddle.net/8B42F/）时，它在Internet Explorer中完美运行。因此，为了向您展示问题，我必须向您提供该网站的链接，并希望有人知道为什么：hover CSS事件不会触发。
http://www.psychmedintl.org/
代码是由PHP编译的，因此有一个线性格式，我为此道歉，但JSFiddle中的代码是我纠正格式后的相同输出。
这是CSS：
#menuitem
{
display: inline-block;
border: 2px transparent solid;
padding: 8px;
margin-top: 4px;
margin-left: 4px;
font-size: 14px;
font-weight: regular;
width: 96px;
text-align: center;
background: transparent;
text-decoration: none;
color: #000000;
}
#menuitem:hover
{
background: transparent url("images/menu_hover.png") repeat-x;
font-weight: bold;
}
#nav
{
margin-left: auto;
margin-right: auto;
text-align: center;
/*margin-left: auto;
margin-right: auto;*/
height: 48px;
width: auto;
background-color: transparent;
text-align: center;
margin-top: -4px;
}
#nav li.top {display:inline-block; float:center;}
#nav li a.top_link
{
display: inline-block;
border: 2px transparent solid;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 0px;
padding-right: 0px;
margin-top: 4px;
margin-left: 0px;
font-size: 14px;
font-weight: regular;
width: 96px;
text-align: center;
background-color: transparent;
text-decoration: none;
color: #000000;
}
#nav li a.top_link span {float:left; display:inline; padding:0 24px 0 12px; height:36px;}
#nav li a.top_link span.down {float:left; display:none; padding:0 24px 0 12px; height:36px; }
#nav li a.top_link:hover {color:#000;}
#nav li a.top_link:hover span {}
#nav li a.top_link:hover span.down {}
#nav li:hover > a.top_link {color:#000; background: url(images/menu_hover.png) repeat-x;}
#nav li:hover > a.top_link span {background:url(images/menu_hover.png) repeat-x right top;}
#nav li:hover > a.top_link span.down {background:url(images/menu_a_hover.png) repeat-x right top;}
/* Default list styling */
#nav li:hover {position:relative; z-index: 10;}
/* keep the 'next' level invisible by placing it off screen. */
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{
position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;
}
#nav li:hover ul.sub
{
min-width: 128px;
left: 0;
top: 40px;
background: #fff;
padding: 3px;
border:2px solid #95eded;
white-space: nowrap;
/*width: 240px; */
width: auto;
height: auto;
position: absolute;
text-align: left;
}
#nav li:hover ul.sub li
{
display:block;
height: 34px;
position:relative;
float:left;
/* width:140px; */
width: 100%;
font-weight:normal;
}
#nav li:hover ul.sub li a
{
display:block;
font-size: 16px;
height:34px;
/*width:140px; */
margin-right: 6px;
width: 100%;
line-height:25px;
text-indent:5px;
color:#000;
text-decoration:none;
position: relative;
}
#nav li:hover ul.sub li:hover
{
background:#95eded;
color:#fff;
position: relative;
}
#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{
min-width: 128px;
left: 64px;
top: 24px;
background: #fff;
padding: 3px;
border:2px solid #95eded;
white-space: nowrap;
white-space:nowrap;
width: auto;
height:auto;
position: absolute;
}
#nav #arrow
{
margin-right: 8px;
background-image: url('images/navarrow.png');
background-repeat: no-repeat;
background-position: right;
}
这是HTML。请忽略预览图片和相应的JavaScript，它们无关紧要。
<div id="menu">
<ul id="nav">
<!-- Home Page Tab -->
<li class="top"><a href="?p=home" class="top_link">Home</a></li>
<li class='top'><a href='javascript:void();' class='top_link'>Who We Are</a>
<ul class='sub'>
<li id='arrow' onmouseover="changePreview('boardofdirectors','0');" onmouseout="changePreview('blank','0');"><a href='javascript:void();'>Board of Directors</a>
<ul>
<div style='width: 100px; display:inline-block'>
<li nmouseover="changePreview('judy','33');" onmouseout="changePreview('blank','33');"><a href='?dp=10'>Judy</a></li>
<li onmouseover="changePreview('stacy','33');" onmouseout="changePreview('blank','33');"><a href='?dp=1'>Stacy</a></li>
<li onmouseover="changePreview('kira','33');" onmouseout="changePreview('blank','33');"><a href='?dp=5'>Kira</a></li>
</div>
<img id='previewImage33' style='display: inline-block;' src='images/previews/blank.jpg' width=102 height=102/>
</ul>
</li>
<li id='arrow' onmouseover="changePreview('providers','0');" onmouseout="changePreview('blank','0');"><a href='javascript:void();'>Providers</a>
<ul>
<div style='width: 100px; display:inline-block'>
<li onmouseover="changePreview('stacy','37');" onmouseout="changePreview('blank','37');"><a href='?dp=1'>Stacy</a></li>
<li onmouseover="changePreview('kira','37');" onmouseout="changePreview('blank','37');"><a href='?dp=5'>Kira</a></li>
<li onmouseover="changePreview('libby','37');" onmouseout="changePreview('blank','37');"><a href='?dp=9'>Libby</a></li>
<li onmouseover="changePreview('zeke','37');" onmouseout="changePreview('blank','37');"><a href='?dp=8'>Zeke</a></li>
</div>
<img id='previewImage37' style='display: inline-block;' src='images/previews/blank.jpg' width=136 height=136/>
</ul>
</li>
<li id='arrow' onmouseover="changePreview('administration','0');" onmouseout="changePreview('blank','0');"><a href='javascript:void();'>Administration</a>
<ul>
<div style='width: 100px; display:inline-block'>
<li onmouseover="changePreview('sam','36');" onmouseout="changePreview('blank','36');"><a href='?dp=11'>Sam</a></li>
<li onmouseover="changePreview('morgan','36');" onmouseout="changePreview('blank','36');"><a href='?dp=43'>Morgan</a></li>
</div>
<img id='previewImage36' style='display: inline-block;' src='images/previews/blank.jpg' width=68 height=68/>
</ul>
</li>
</ul>
</li>
<li class='top'><a href='javascript:void();' class='top_link'>What We Do</a>
<ul class='sub'>
<li onmouseover="changePreview('disasterrelief','0');" onmouseout="changePreview('blank','0');"><a href='?dp=6'>Disaster Relief</a></li>
<li onmouseover="changePreview('trainingandeducation','0');" onmouseout="changePreview('blank','0');"><a href='?dp=7'>Training and Education</a></li>
<li onmouseover="changePreview('medicalandclinicalwork','0');" onmouseout="changePreview('blank','0');"><a href='?dp=13'>Medical and Clinical Work</a></li>
<li onmouseover="changePreview('assessmentandresearch','0');" onmouseout="changePreview('blank','0');"><a href='?dp=14'>Assessment and Research</a></li>
</ul>
</li>
<li class='top'><a href='javascript:void();' class='top_link'>Locations</a>
<ul class='sub'>
<li onmouseover="changePreview('haiti','0');" onmouseout="changePreview('blank','0');"><a href='?dp=12'>Haiti</a></li>
<li onmouseover="changePreview('jordan','0');" onmouseout="changePreview('blank','0');"><a href='?dp=16'>Jordan</a></li>
<li onmouseover="changePreview('unitedstates','0');" onmouseout="changePreview('blank','0');"><a href='?dp=15'>United States</a></li>
<li onmouseover="changePreview('jamaica','0');" onmouseout="changePreview('blank','0');"><a href='?dp=17'>Jamaica</a></li>
</ul>
</li>
<li class='top'><a href='javascript:void();' class='top_link'>Get Involved</a>
<ul class='sub'>
<li onmouseover="changePreview('scheduleatraining','0');" onmouseout="changePreview('blank','0');"><a href='?dp=18'>Schedule A Training</a></li>
<li onmouseover="changePreview('requestservices','0');" onmouseout="changePreview('blank','0');"><a href='?dp=19'>Request Services</a></li>
<li onmouseover="changePreview('donatetodisasterrelief','0');" onmouseout="changePreview('blank','0');"><a href='?dp=20'>Donate To Disaster Relief</a></li>
</ul>
</li>
<li class='top'><a href='javascript:void();' class='top_link'>Contact</a>
<ul class='sub'>
<li onmouseover="changePreview('contactus','0');" onmouseout="changePreview('blank','0');"><a href='?p=contact'>Contact Us</a></li>
<li onmouseover="changePreview('reportanerror','0');" onmouseout="changePreview('blank','0');"><a href='?p=webmaster'>Report An Error</a></li>
</ul>
</li>
<li class='top'><a href='BLOG URL HERE' class='top_link'>Blog</a></li>
</ul>
</div>
为什么下拉菜单不会触发：悬停？感谢。
答案 0 :(得分：0)
许多人可能知道，Internet Explorer对某些语法非常挑剔。挑剔的一件事是<!DOCTYPE>标签。事实证明，我在doctype声明之前使用了<div>元素，以便隐藏因MySQL错误而导致的任何不需要的输出。我的替代解决方案是通过PHP清除输出缓冲，而不是隐藏<div>的廉价解决方案。
我使用输出缓冲来允许我甚至在页面上呈现内容后重定向我的PHP页面。一旦设置了输出缓冲，任何时候使用ob_clean();都会告诉PHP将所有内容转储到输出缓冲区中，从而防止在页面完成渲染后将该点之前的任何错误或数据发送到浏览器。 / p>