css - IE8 没有让绝对定位的元素脱离流程

Question

所以我在IE8中遇到了一个我无法弄清楚的错误。我见过一些傻瓜，但这个可能很成功。

我尝试在 Codepen 中复制它，但是我们有很多代码，所以我将尝试包括来自 IE8 的计算样式。

使用 Foundation 5，我有一个开始看起来像这样的顶部栏:

下拉列表是绝对定位的，所以它显然不应该拉伸(stretch)父容器。它实际上并没有拉伸(stretch) parent ，而是祖 parent 。这是标记:

<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 标准在 Win7 的 Parallels VM 和 IE8 上进行测试。

Answer 1

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