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

这很简单。