当您将鼠标悬停在父列表项上时，我使用以下 CSS 在列表显示中制作子列表。在 IE7 和 8(但不是 ff 和 chrome)中，子 li 元素之间的空间(由行边距提供:0.25em 0 0 0;)导致浏览器松开悬停并再次隐藏子列表。我怎样才能解决这个问题？干杯。
我认为是 CSS 的原因:
#integratedSearchList li:hover > ul
{
display: block;
}
#integratedSearchList ul
{
display: none;
margin: 0;
padding: 0;
position:absolute;
list-style-type: none;
text-decoration: none;
z-index: 100;
width:100%;
}
#integratedSearchList ul li
{
border: 1px solid #cccccc;
background: #ffffff;
text-align: right;
padding: 0.5em;
margin: 0.25em 0 0 0;
z-index: 100;
height: auto;
width:90%;
}
HTML:
<div id="integratedSearchContainer">
<form id="integratedSearchForm" class="integratedSearchForm" action="..." method="get" name="integratedSearchForm">
<ul id="integratedSearchList">
<li>
<label for="search" class="hidden">...</label> <input name="query" id="integratedSearchInput" hint="" type="text" maxlength="100" value=""> <button id="integratedSearchbutton" type="submit" class="enablehover" title=" Search ">Go</button>
<ul>
<li>
<a id="integratedAdvancedSearchHref" href="..." name="integratedAdvancedSearchHref">Advanced Search</a>
</li>
<li>
<label for="seachSource1">...</label> <input id="seachSource1" name="source" type="checkbox" value="..."><br>
<label for="seachSource2">...</label> <input id="seachSource2" name="source" type="checkbox" value="..."><br>
</li>
</ul>
</li>
</ul>
</form>
</div>
完整的 CSS:
#integratedSearchContainer
{
position:relative;
float: right;
margin: 1em 1.5em 0 0.75em;
padding: 0;
background: #ffffff;
}
#integratedSearchList
{
clear: both;
margin: 0;
padding: 0;
background: #ffffff;
list-style-type: none;
text-decoration: none;
width: 100%;
}
#integratedSearchList li
{
width: inherit;
}
#integratedSearchList li:hover > ul
{
display: block;
}
#integratedSearchList ul
{
display: none;
margin: 0;
padding: 0;
position:absolute;
list-style-type: none;
text-decoration: none;
z-index: 100;
width: 100%;
}
#integratedSearchList ul li
{
border: 1px solid #cccccc;
background: #ffffff;
text-align: right;
padding: 5%;
margin: 0.25em 0 0 0;
z-index: 100;
height: auto;
width: 90%;
}
#integratedSearchList ul li:first-child > a
{
}
#integratedSearchList ul li:last-child > a
{
}
.integratedSearchForm {
border: 1px solid #cccccc;
background-color: #ffffff;
}
.integratedSearchForm button, .integratedSearchForm .button {
background: transparent url(../images/button_search.gif) no-repeat center top;
width: 17px;
height: 17px;
padding: 0 0 0 0;
margin: 2px 2px 2px 2px;
border: none;
text-indent: -1000em;
cursor: pointer;
}
.integratedSearchForm button:hover, .integratedSearchForm button.hover,
.integratedSearchForm .button:hover, .integratedSearchForm .button.hover {
background-image: url(../images/button_search_feint.gif);
}
.integratedSearchForm button:disabled, .integratedSearchForm button.disabled,
.integratedSearchForm .button:disabled, .integratedSearchForm .button.disabled {
background-image: url(../images/button_search_disabled.gif);
}
.integratedSearchForm #integratedSearchInput {
border: none;
margin: 2px 0.25em 2px 0.25em;
background: #ffffff;
width: 200px;
}
最佳答案
在您声明的评论中，您认为没有设置文档类型。这可能是问题所在，因为您处于怪癖模式，您永远不会让 IE 尝试像其他更现代的浏览器那样运行。添加适当的文档类型，例如 <!DOCTYPE html>看看这是否不能修复 IE。
如果您无法访问 HTML，那么您将陷入一个痛苦的世界，因为现在这需要不断地进行黑客攻击才能击败 IE，使其屈服于现代世界。
关于html - IE li 悬停未检测到 li 元素上有边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9006755/