Internet Explorer 9漸變過濾器關閉子菜單

Question

Internet Explorer 9中存在一個奇怪的問題。使用的CSS過濾器漸變切斷了我的子菜單。例如，這是一個JSFiddle。下面是一個簡單的代碼：

HTML

<div id="headWrapper"> 
    <header> 
     <nav id="main"> 
      <ul> 
       <li> 
        <a href="javascript:void(0);">Parent Navigation Item</a> 
        <ul class="submenu"> 
         <li><a href="javascript:void(0);">Child Nav Item 1</a></li> 
         <li><a href="javascript:void(0);">Child Nav Item 2</a></li> 
         <li><a href="javascript:void(0);">Child Nav Item 3</a></li> 
         <li><a href="javascript:void(0);">Child Nav Item 4</a></li> 
         <li><a href="javascript:void(0);">Child Nav Item 5</a></li> 
         <li><a href="javascript:void(0);">Child Nav Item 6</a></li> 
        </ul> 
       </li> 
      </ul>   
     </nav><!-- main --> 
    </header> 
</div><!-- headWrapper --> 

CSS

*{margin: 0; padding: 0;} 
header, nav  {display: block;} 
#headWrapper {border-bottom: 1px solid #eee; position: relative; z-index: 5; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e1eaf0',GradientType=0);} 
header   {width: 1000px; height: 75px; margin: 0 auto; clear: both;} 

#main     {float: left;} 
#main ul    {list-style: none;} 
#main li    {float: left;} 
#main a     {display: block;} 
#main li ul.submenu   {display: block; padding: 4px; border: 1px solid #000; position: absolute; z-index: 999; border: 1px solid #ddd; margin-left: 12px; border-top: 0; background-color: beige; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;} 
#main li ul.submenu li  {float: none; display: block;} 

如果我從我的#headWrapper菜單中刪除過濾梯度預期工作。隨着漸變在那裏，我只能看到邊框，它切斷了標題實際高度以外的任何東西。

1. 這是怎麼發生的？
2. 我該如何解決它？

我通過IE仿真和Browser Shots測試，它顯示了破兩所以看起來它不僅僅是一個模擬器的問題（或瀏覽器射擊時使用模擬器，只是給我看什麼，我已經知道了） 。我一直在玩它一個小時，並沒有運氣修復它，除非我完全刪除梯度或刪除固定/ z-索引，我也不想這樣做。

Answer 1

Live demo

可以分開，將有來自將持有的鏈接標籤此背景下股利。這裏是我的意思是更詳細的：

<div id="headWrapper">不應該是所有文本的父級，因爲它會限制它的高度後，在Internet Explorer中使用過濾器。 （這似乎是一個常見問題，它會強制隱藏溢出）。

因此，只需將<div id="headWrapper"></div>爲您的標題標籤的兄弟姐妹，使兩者headWrapper和頭部有一個固定的位置：

#headWrapper {... position: fixed; ...} 
header {... position: fixed; ...} 

和這裏的HTML看起來像（查看我的評論）：

<div> 
    <div id="headWrapper"></div> 
    <!--Notice the headWrapper and header are siblings--> 
    <header> 
     <nav id="main"> 
      <ul> 
       <li> 
        <a href="javascript:void(0);">Parent Navigation Item</a> 
        <ul class="submenu"> 
         <li><a href="javascript:void(0);">Child Nav Item 1</a></li> 
         <li><a href="javascript:void(0);">Child Nav Item 2</a></li> 
         <li><a href="javascript:void(0);">Child Nav Item 3</a></li> 
         <li><a href="javascript:void(0);">Child Nav Item 4</a></li> 
         <li><a href="javascript:void(0);">Child Nav Item 5</a></li> 
         <li><a href="javascript:void(0);">Child Nav Item 6</a></li> 
        </ul> 
       </li> 
      </ul>   
     </nav><!-- main --> 
    </header> 
</div> 

請注意，我也做了一些隨機改善你的CSS：

*{margin: 0; padding: 0;} 
body {height: 1000px;} 

#headWrapper { 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e1eaf0',GradientType=0); 
    border-bottom: 1px solid #eee; 
    position: fixed; 
    height:75px; 
    width:100%; 
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
    } 

header { width: 100%; position:fixed; } 

#main {float:left;} 
#main ul li a { float:left; width:100%; } 
#main li ul.submenu { 
    float:left; 
    list-style:none; 
    padding: 4px; 
    border: 1px solid #ddd; 
    margin-left: 12px; 
    border-top: 0; 
    background-color: beige; 
    -webkit-border-radius: 0 0 8px 8px; 
    -moz-border-radius: 0 0 8px 8px; 
    border-radius: 0 0 8px 8px; 
} 

替代解決方案：

將漸變效果作爲背景圖像並水平重複。從w3Schools

Answer 2

演示通過從#headWrapper z-索引，將工作

#headWrapper { 
    border-bottom: 1px solid #eee; 
    position: fixed; 
    top: 0; 
    left: 0; 
    /*z-index: 5;*/ 
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e1eaf0',GradientType=0); 
} 

您可以點擊這裏Full Screen JS Fiddle

JS Fiddle

檢查這個問題上，即9

Z-index or overflow issue, on a css menu, with gradient background in IE 9

Answer 3

我建議使用一個單獨的元素爲好，但變得無法兄弟實際容器，但其子元素：

<div id="headWrapper"> 
    <div id="headerDummy"></div> 
    <header> 
     ... 
    </header> 
</div> 

#headerDummy將扮演一個梯度持有人，我們可以把它拉伸以填充整個父：

剩下的工作就是告訴含量

#headerDummy{ 

    /* The bacgkground-serving el will not interfere the normal flow, ... */ 
    position:absolute; 

    /* ... it will have exactly the same size, as the container (you can make it taller or wider and don't have to change the #headerDummy style), ... */ 
    top:0;    
    left:0; 
    display:block; 
    width:100%; 
    height:100%; 

    /* ... be BEHIND the actual content... */ 
    z-index:1; 

    /* ... and still have our gradient. */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endC 
olorstr='#e1eaf0',GradientType=0); 
} 

一切是上述的背景下，這種方式：

header{ 
    position:relativer; 
    z-index:10; 
    ... 
} 

這是怎麼會看：http://jsfiddle.net/16qchfc6/22/

我們可以讓它變得更好，更語義正確使用僞元素，而不是一個實際的元素，但不幸的是IE seems not to apply filter for pseudo-elelemnts

---

通過在Win7上的實際生活IE9顯示這樣的菜單：

事實上，邊界沒有被裁剪，所以它可能只是一個錯誤或某種袋子algorythm片。