为什么这个 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

在标题中添加此元标记以兼容 IE9：

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

Answer 2

尝试使用 colorzilla 生成渐变：

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

这很简单。