IE8沒有采取絕對定位元素流出

所以我遇到了一個我無法弄清楚的IE8錯誤。我見過一些doozies，但這可能會拿走蛋糕。IE8沒有采取絕對定位元素流出

我試着在Codepen中複製它，但我們有很多代碼，所以我會嘗試從IE8中包含計算的樣式。

使用基金會5，我有一個頂級的酒吧，開始出去找這樣的：

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標準在Win7的Parallels虛擬機上測試IE8。

來源

2014-06-25 Syren

在基金會5中不支持IE8的http://foundation.zurb.com/docs/compatibility.html，並且在F4中只有部分支持http://foundation.zurb.com/docs/v/4.3 .2/support.html如果你想完整的IE8支持使用F3。另外http://stackoverflow.com/questions/tagged/zurb-foundation+internet-explorer-8 – JAre

我意識到這一點，我已經解決了大部分沒有用的東西。這是一個非常具體的問題。 – Syren

我看到一些嘗試使F5 IE8兼容，而沒有像這個http://foundation.zurb.com/forum/posts/241-foundation-5-and-ie8這樣的JS部分，但不清楚這個解決方案有多可靠，很難確定你是否已經解決了大部分問題或者只是解決了一些問題。 – JAre

您是否有鏈接查看此鏈接？我想知道你是否應該設置ul來定位相對位置。我認爲李正在倒退到第一個相對定位的項目。希望這有助於。

來源

2014-06-25 23:05:04

對不起，我不知道。即使它回落到第一個相對定位的物品，它仍然不應該停留在流程中。 – Syren

你有鏈接查看？ – riazshah

如果任何絕對元素的父元素都有位置：相對的，則絕對是計算相對的是，

嘗試刪除的位置：從父容器相對也許它可以幫助

也請確保您有正確的

<!DOCTYPE html>

在你的文件的開頭

來源

2014-07-04 18:28:25 Prozi

無論什麼元素都具有位置：相對它，它不應該擴展一個包含元素。位置：絕對應該將元素從流中取出，因此不管它的位置是哪個元素，它的父元素都不應擴展。 – Syren

我同意Syren – Prozi

它不是一個IE8的渲染誤差，BU某處出現編碼錯誤/不兼容的情況。此演示代碼顯示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。

來源

2014-07-07 23:45:36

您的下拉列表的最大寬度爲200px。 IE8不能很好地處理最大寬度。基本上它被視爲寬度聲明。你在IE8中強制寬度爲200px。你需要將它設置爲無...

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

來源

2014-12-26 23:55:24 jswitchback

我不認爲這個「bug」與位置有關：絕對;沒有接受。從流中退出。 li.has-dropdown也有一個.hover狀態應用於它。有可能有一些其他樣式應用於導致＃global-nav移動的li.has-dropdown。也許一些額外的填充正在應用於li.has-dropdown。不幸的是，我們沒有全部的代碼來正確調試它。

來源

2015-05-30 16:25:56 ralgh

IE8沒有采取絕對定位元素流出

回答

相關問題