0

何が私のレイアウトを壊しているのかを理解するのに長い時間がかかりました（問題は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);


}
4

2 に答える 2

0

IE9 との互換性のために、ヘッダーにこのメタ タグを追加します。

<meta http-equiv="X-UA-Compatible" content="IE=9" />
于 2012-11-22T16:57:11.527 に答える
-1

Try to generate your gradient with colorzilla:

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

It's very simple.

于 2012-11-19T19:37:55.230 に答える