IE li 未检测到 li 元素上的边距悬停答案

【问题标题】：IE li hover not detected with margins on the li elementIE li 未检测到 li 元素上的边距悬停
【发布时间】：2012-02-18 21:00:58
【问题描述】：

当您将鼠标悬停在父列表项上时，我使用以下 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;
}

【问题讨论】：

您介意在 jsfiddle.net 上发布您的 HTML 或重新创建您的问题吗？
我有一半的感觉你没有使用文档类型。你是？哪一个？
HTML 已发布，很抱歉不得不删除一些值 - 它与工作相关。我认为没有设置文档类型，但很难说，因为我没有直接处理 HTML。

标签： html css internet-explorer hover html-lists

【解决方案1】：

在您声明的 cmets 中，您认为没有设置文档类型。这可能是问题所在，因为您处于怪癖模式，并且您永远不会让 IE 尝试像其他更现代的浏览器那样执行。添加适当的文档类型，例如<!DOCTYPE html>，看看是否不能修复 IE。

如果您无法访问 HTML，那么您将处于一个受伤害的世界，因为这将需要一次又一次的破解来击败 IE 以适应现代世界。

【讨论】：

【解决方案2】：

为什么不完全避免这个问题呢？从 li 元素中删除边距，并使它们有效地透明（没有边距、边框等）。然后使用内部元素来实际形成您的菜单结构（在您的情况下可能是 div，因为您的菜单不仅仅是链接）。内部元素到位后，改为设置样式。

可能是这样的：

<ul id="integratedSearchList">
  <li>
    <div class="menu-item">
    <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>
    </div>
    <ul>
      <li> **//No margins or borders**
        <div class="menu-item"> **// Style borders, margins, etc.., here**
            <a id="integratedAdvancedSearchHref" href="..." name="integratedAdvancedSearchHref">Advanced Search</a>
        </div>
      </li>
      <li>
        <div class="menu-item">
           <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>
        </div>
      </li>
    </ul>
  </li>
</ul>

您可以通过向每个“ul”元素级别添加一个 CSS 类来更进一步，从而让您进一步自定义“菜单项”类。

【讨论】：

尝试了将 li 内容包装在菜单项 div 中并将填充等移动到此的第二个建议。即使 IE 中的调试显示
容器满足，仍然存在相同的行为。与背景透明或其他有什么关系？

刚刚通过在 li 元素上添加背景进行测试并停止了问题，这很烦人，因为我想要项目之间的透明空间。