Question

所以我遇到了一个我无法在IE8中弄清楚的错误。我见过一些doozies，但是这个可能会有点结果。

我尝试在Codepen中复制它，但我们有很多代码，所以我会尝试包含IE8中的计算样式。

使用Foundation 5，我有一个Top Bar，看起来像这样：

Before

After

下拉列表绝对定位，因此显然不应该伸出父容器。它并没有实际伸展出父母，而是祖父母。这是标记：

<nav id="global-nav" class="top-bar has-dropdown show-for-large-up" data-topbar >
<section class="top-bar-section">
    <ul class="title-area">
        <li class="name">
          <a href="">Title</a>
        </li>
    </ul>
</section>

    <section class="links top-bar-section">
        <ul class="left">
            <li class="divider"></li>
            <li><a href="">Create</a>
            </li>
            <li class="divider"></li>
            <li class="has-dropdown">
                <a>Explore</a>
                <ul class="dropdown tab-left" id="explore-menu">
                    <li><a href="#">Link 1</a>
                    </li>
                    <li><a href="#">Link 2</a>
                    </li>
                    <li><a href="#">Link 3</a>
                    </li>
                </ul>
            </li>
            <li class="divider"></li>
            <li><a href="#">Find</a>
            </li>
        </ul>
    </section>
<section class="top-bar-section">
    <ul class="right">
      <li class="has-form search">
          <form id="header_search" name="search_form">
              <input type="search" placeholder="Search" class="search" results=3 id="search_term" name="search_value" maxlength="200" />
              <button id="search_submit"></button>
          </form>
      </li>

      <li class="login">
          <a href="javascript:;" id="launch-login">Login</a>
      </li>
    </ul>
</section>

来自IE8的计算CSS：

#global-nav{ //this is the topbar that is stretching
    background: #2a2d43;
    background-image: none;
    color: #666;
    display: block !important;
    font: inherit;
    font-family: sans-serif;
    font-size: 16px;
    height: 80px;
    line-height: 60px;
    margin: 0px;
    overflow: visible;
    padding: 0;
    position: relative;
    vertical-align: baseline;
    width: 100%;
}

li.has-dropdown .dropdown{
    background: #fff;
    box-sizing: border-box;
    clip: rect(1px 1px 1px 1px);
    z-index: 99;
    color: #666;
    display: block;
    font: inherit;
    font-family: sans-serif;
    font-size: 16px;
    height: auto !important;
    left: 10%;
    line-height: 60px;
    margin: 0;
    max-height: none;
    max-width: 200px;
    overflow: hidden;
    padding: 0px;
    position: absolute !important;
    right: auto;
    top: 64px;
    vertical-align: baseline;
    visibility: hidden;
    width: auto;
}

li.has-dropdown.hover .dropdown{ //the open dropdown state
    clip: rect(auto auto auto auto);
    visibility: visible;
}

如果您需要更多信息，请告诉我们。提前谢谢。

作为参考，我使用IE8文档模式和IE8标准，使用IE8在Win7的Parallels VM上进行测试。

Answer 1

你有链接查看吗？我想知道你是否应该将ul设置为相对位置。我认为李正在回到第一个相对定位的项目。希望这会有所帮助。

Answer 2

如果绝对元素的任何父元素具有position：relative，则相对于该值计算绝对值，

尝试删除位置：相对于父容器可能有帮助

还要确保你有正确的

<!DOCTYPE html>

在文件的开头

Answer 3

这不是IE8渲染错误，而是某处的编码错误/不兼容。这个演示代码显示IE8确实从流程中取出了绝对定位的下拉元素：

<!DOCTYPE html>
<head>
    <title>Demo IE8 Drop-Down Menu</title>
    <meta charset="utf-8">
<style>
#navDivParent { /* = grandparent of the dropdown menu */
    background-color: darkblue;
    text-align: right;
    color: white;
    height: 100px;
    width: 550px;
}
#navDiv ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
#navDiv ul li {
    float: left;
    position: relative;
    margin-right: 10px;
}
#navDiv ul li ul li {
    clear: left;
}
#navDiv ul ul {
    display: none;
}
#navDiv ul li:hover ul {
    display: block;
    position: absolute;
}
#navDiv a {
    display: block;
    padding: 0 10px 0 10px;
    background: yellow;
    color: blue;
    text-decoration: none;
}
#navDiv #item2SubList a {
    width: 175px;
}
#navDiv a:hover {
    background: red;
    color: white;
}
</style>
</head>
<body>
    <div id="navDivParent">This is the grandparent<br> of the dropdown menu.
        <div id="navDiv">
            <ul>
                <li><a href="#">Menu item</a></li>
                <li><a href="#">Menu item w/ child</a>
                    <ul id="item2SubList">
                        <li><a href="#">Menu sub-item</a></li>
                        <li><a href="#">Menu sub-item</a></li>
                        <li><a href="#">Menu sub-item</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu item</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

。
我还没有制作现场演示，因为JSFiddle，JSBin和IE8中没有这样的功能，但我在IE8模式下在真正的IE8和IE9中进行了测试。

由于提供的代码中的代码不包含CSS :hover状态声明，编码错误/不兼容性可能存在于驱动悬停状态的Javascript中。

Answer 4

您的下拉列表的最大宽度为200px。 IE8不能很好地处理最大宽度。基本上它被视为宽度声明。你在IE8中强制宽度为200px。您需要将其设置为无...

max-width:none\9; /* IE8 */

Answer 5

我不认为这＆＃34; bug＆＃34;与职位有关：绝对;没有将.dropdown从流程中取出。 li.has-dropdown也有一个.hover状态。可能还有一些其他样式应用于li.has-dropdown导致#global-nav移位。也许一些额外的填充应用于li.has-dropdown。很遗憾，我们没有正确调试此代码的所有代码。

IE8没有采取绝对定位的元素流出

5 个答案: