1

メインメニューとして使用している水平の順序なしリストと、ドロップダウンサブメニューとして使用しているネストされた順序なしリストがあります。メイン メニューで CSS 3 グラデーションを使用していますが、サブ メニューが IE のリストに限定されてしまいます。つまり、リスト項目の高さを上げると、サブメニューの一部が表示されますが、これは明らかにオプションではありません。

以前にこの問題に遭遇した人について聞いたことがあり、誰かが助けてくれるかどうか疑問に思っていました. メニューのHTMLです。

    <div id="menu">
      <div class="mainmenu">
        <ul>
          <li>
            <a href='path'>Home</a>
          </li>
          <li>
            <a href='path'>Country Garden</a>
          </li>
          <li>
            <a href='path'>Inner City Garden</a>
          </li>
          <li>
            <a href='path'>Winter Garden</a>
            <ul>
              <li>
                <a href='path'>Featured Products</a>
              </li>
              <li>
                <a href='path'>Best Sellers</a>
              </li>
              <li>
                <a href='path'>Special Offers</a>
              </li>
            </ul>
          </li>
          <li>
            <a href='path'>Water Garden</a>
          </li>
          <li>
            <a href='path'>Window Box</a>
          </li>
        </ul>
      </div>
    </div>

これは、それを制御する CSS です。

    .mainmenu{
        clear: both;
        height: 42px;
        margin: 0;
        width: 980px;
    }
    .mainmenu ul{
        list-style: none;
        margin: 0;
        padding: 0;
        text-align:center;
    }
    .mainmenu li{
        display: inline-block;
        margin: 0;
        padding: 0;
        z-index:1000;
        height: 42px;
        position: relative;
    }
    .mainmenu li a{
        display: inline-block;
        height: 33px;
        padding: 9px 25px 0;
    } 
    .mainmenu ul ul{
        float: left;
        left: 0;
        padding: 5px 0 10px 0;
        position: absolute;
        text-align: left;
        top: 42px;
        width: 200px;
        z-index: 10000;
    }
    .mainmenu li li{
        clear: both;
        text-align: left;
        height: 30px;
    }
    .mainmenu ul li ul{
        display:none;
    }
    .mainmenu li ul li a {
        height: auto;
        padding: 2px 25px;
        width: 150px;
    }
    .mainmenu li ul li a, .mainmenu li.over li a {
        text-decoration: none !important;
    }
     .mainmenu li:hover ul, .mainmenu li.over ul {
        display: block;
    }

これは IE8 で問題を引き起こすスタイルです。

        .mainmenu li{
            background-color: #25abec;
            background-image:-moz-linear-gradient(top,#25abec,#1984b8);
            background-image:-webkit-gradient(linear,left top,left bottom,from(#25abec),to(#1984b8));
            filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#25abec,endColorStr=#1984b8);
        }

問題を引き起こすのは最後の行です。私がそれを取り出すと、動作しますが、間違っているように見えます。問題は IE と Opera にありますが、Firefox、Google Chrome、Safari では動作します。

4

1 に答える 1

0

IEfilterは実際にさまざまな問題を引き起こすことがあります。私の推奨事項は、フィルタをまったく適用せず、IE8 に単純な default を持たせbackground-color、おそらくSVG を使用して IE9 の背景を取得することです。

于 2012-05-02T13:46:02.410 に答える