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

Question

所以我遇到了一个我在IE8中无法弄清楚的错误.我见过一些doozies,但这个可能会拿走蛋糕.

我尝试在Codepen中复制它,但我们有很多代码,所以我将尝试包括IE8中的计算样式.

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

下拉列表绝对定位,因此显然不应该伸出父容器.它实际上并不伸展父母,而是祖父母.这是标记:

<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的Parallels VM上进行IE8测试.

Answer 1

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