Html 为什么CSS3渐变会破坏我在IE中的页面布局？

我花了很长时间才弄明白是什么破坏了我的布局（问题只存在于ie中）。我正在使用html5（与Moderizer一起），如果我从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>

---

尝试使用colorzilla生成渐变：

---

这很简单。

在标题中添加此meta标记，以便与IE9兼容：

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

尝试将过滤器作为最后一项。IE过滤器代码中可能存在错误，一旦出现该错误，CSS解析将跳过该选择器块后面的其他CSS规则。至于为什么过滤器不是，很抱歉，我对IE专有代码不够熟悉。从技术上讲，这不是CSS3渐变。我认为您的过滤器中缺少

GradientType=1

（或0）。@jmbertucci-将过滤器移到最后没有任何积极的效果（目前，我对旧IE的渐变进行了注释）.@shmiddy-无论采用哪种方式，gradienttype都没有关系…它将默认为0。他已经有了渐变的CSS–这并没有解决问题。我使用colorzilla制作渐变。我使用：（）

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