爲什麼這個CSS3漸變在IE中打破了我的頁面佈局？

Question

我花了很長時間才弄清楚什麼打破了我的佈局（這個問題只在ie中）。我使用HTML5（與moderizr），我想通了佈局是很好，如果我刪除從CSS如下：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f5ede1, endColorstr=#f5ede1); 

我希望有梯度的設計，雖然...爲什麼過濾破在Internet Explorer中的佈局？

頁眉的HTML是：

<header> 
    <section id="header"> 
     <div id="logo"><a href="/"><img alt="Congress" src="../img/congress-logo.png"></a></div> 
     <div id="ons-logo"><a target="_blank" href="http://ons.org"><img width="175" height="77" alt="Oncology Nursing Society" src="../img/ons-logo.png"></a></div> 
    </section> 
    <nav id="main-nav"> 
     <ul> 
      <li id="register"><span>Register</span> 
       <ul class="subNav"> 
        <li>subnav</li> 
       </ul> 
       </li> 

    <li id="exhibit"><span>Exhibit Hall</span> 
       <ul class="subNav"> 
       <li>subnav</li> 
       </ul> 
      </li> 
      <li id="networking"><span>Networking</span> 
       <ul class="subNav" style="display: none;"> 
       <li>subnav</li> 
      </ul> 
      </li> 
     </ul> 
    </nav> 
</header> 

這是我的CSS：

img { 
    border: 0; 
    width: 100%; 
    display: block; 
    max-width: 100%; 
} 


header{ 
    background: #f5ede1; /* Old browsers */ 
    background: -moz-linear-gradient(top, #f5ede1 0%, #fbf8f3 48%, #f5ede1 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5ede1), color-stop(48%,#fbf8f3), color-stop(100%,#f5ede1)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #f5ede1 0%,#fbf8f3 48%,#f5ede1 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #f5ede1 0%,#fbf8f3 48%,#f5ede1 100%); /* Opera 11.10+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f5ede1, endColorstr=#f5ede1); /*IE6-9 */ 
    background: -ms-linear-gradient(top, #f5ede1 0%,#fbf8f3 48%,#f5ede1 100%); /* IE10+ */ 
    padding-bottom: 10em; 
    position:relative; 
    max-width: 100%; 
    margin: 0px; 

} 
.ie7 header/*, .ie8 header*/{ 
    padding-bottom:0px; 
} 
section#header{ 
    max-width: 900px; 
    margin: auto; 
    position: relative; 

} 

div#logo { 
    float: left; 
    margin: 1em 0 0 2em; 
    max-width:365px; 
} 
.ie8 div#logo{ 
    width:365px; 
} 

div#ons-logo{ 
    max-width: 175px; 
    padding-left: 23em; 
    float:left; 

} 

.ie8 div#ons-logo{ 
    width: 175px; 
} 

nav#main-nav { 
    margin-top: -30px; 

    padding: 0.5em 5% 0.5em 35%; 
    width: 60%; 
    float: left; 
    background: #d56d2a; /* Old browsers */ 
    background: -moz-linear-gradient(top, #d56d2a 1%, #f47d31 10%, #f47d31 85%, #ea8f52 100%, #f47d31 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#d56d2a), color-stop(10%,#f47d31), color-stop(85%,#f47d31), color-stop(100%,#ea8f52), color-stop(100%,#f47d31)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #d56d2a 1%,#f47d31 10%,#f47d31 85%,#ea8f52 100%,#f47d31 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #d56d2a 1%,#f47d31 10%,#f47d31 85%,#ea8f52 100%,#f47d31 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #d56d2a 1%,#f47d31 10%,#f47d31 85%,#ea8f52 100%,#f47d31 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #d56d2a 1%,#f47d31 10%,#f47d31 85%,#ea8f52 100%,#f47d31 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d56d2a', endColorstr='#f47d31',GradientType=0); /* IE6-9 */ 

    border-bottom: 2px solid #F5D8C7; 
    border-top: 2px solid #F5D8C7; 
    box-shadow: 0 10px 9px rgba(0, 0, 0, 0.55); 


} 

Answer 1

嘗試與colorzilla產生的梯度：

http://www.colorzilla.com/gradient-editor/

這是非常簡單。

Answer 2

在頭部添加這個元標記campatibility與IE9：

<meta http-equiv="X-UA-Compatible" content="IE=9" />