Question

当您将鼠标悬停在父列表项上时，我使用以下css在列表显示中创建子列表。在IE7＆amp; 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;
}

Answer 1

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

如果您无权访问HTML，那么您将面临一个受到伤害的世界，因为现在需要通过黑客入侵来击败IE以及现代世界。

Answer 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类来进一步实现它，从而让您可以进一步自定义“菜单项”类。

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

2 个答案: