0

ドロップダウン メニューを含むデザインを作成していますが、最新のブラウザー (Firefox、Chrome、Opera、Safari、および IE9) ですべて正常に動作します。ただし、IE7 および IE8 を使用する訪問者の数が多いため、これらのバージョンの Internet Explorer と互換性のあるメニューを作成する必要もあります。

ドロップダウン メニュー ( fiddle、pastebin ) は次のとおりです。

HTML

<ul class="menu_top">
    <li><a href="/" title="Home" class="selected">Home</a></li>
    <li><a href="/Help_Videos" title="Help Videos" class="haschildren">Help Videos</a><ul>
        <li><a href="/Child_Page" title="Child Page">Child Page</a></li>
        <li><a href="/Site_Map" title="Site Map" class="haschildren">Site Map</a><ul>
            <li><a href="/Galleries" title="Galleries">Galleries</a></li>
            <li><a href="/Missing" title="Missing">Missing</a></li></ul>
        </li></ul>
    </li>
    <li><a href="/About" title="About" class="haschildren">About</a><ul>
        <li><a href="/Contact" title="Contact">Contact</a></li></ul>
    </li>
</ul>

CSS

ul.menu_top {
    float:left;
    width:70%;
    margin: 8px 100px 0 0;
    border-radius:4px;
    background-color: #c4092a;
    list-style-type: none;
    z-index:+1;
}
ul.menu_top li {
    float: left;
    position: relative;
    margin: 4px 2em 4px 4px;
    padding: 0;
}
ul.menu_top li ul {
    visibility: hidden;
    position: absolute;
    top:100%;
    left:0;
    padding:0.5em;
    list-style-type: none;
    white-space:nowrap;
    background-color: #c4092a;
    border: 1px solid white;
    border-radius:4px;
    z-index:+1;
}
ul.menu_top li:hover > ul {
    visibility: visible;
    z-index: +2;
}
ul.menu_top li ul li {
    padding: 0;
    margin: 12px 4px;
    float:none;
    border:0;
    min-width:3em;
}
ul.menu_top li ul li ul {
    top:0;
    left:99%;
}
ul.menu_top a {
    background-color:#c4092a;
    color:white;
    text-decoration:none;
    padding:4px;
    font-size:18px
}
ul.menu_top a:hover,
ul.menu_top a.haschildren.childselected,
ul.menu_top a.selected {
    background-color:white;
    color:blue;
    text-decoration:none;
}
ul.menu_top li a.haschildren:after {
    content: "\00A0\00A0\25BC";
}
a {
    color:#0000aa;
    background-color:inherit;
}

IE7 および IE8 のスクリーンショット

IE7 + IE8 での表示

IE 開発者ツールで下位互換性をテストしました。

  • IE7:リスト<ul>がずれており、ナビゲーションが不可能
  • IE8:丸い角だけが欠けている (これは小さな問題です)

この回答でアドバイスされているようにスタイルを変更しようとしましたが、成功しませんでした。

では、これらの問題を解決する方法を知っている人はいますか?

4

1 に答える 1

1

全体として、あなたの問題は、使用している CSS が、サポートする必要のある一部のブラウザーよりも高度であることです。丸みを帯びた角とほとんどの疑似要素は、古いブラウザーではサポートが不十分です。

あなたの矢印がIE7にないことに気づきました。それが私の手がかりでした。IE7 は疑似クラス要素 :after をサポートしていません。これは、特定の CSS http://kimblim.dk/css-tests/selectors/のブラウザー サポートを確認するのに役立つ参照ページです。

Quirksmode.org は、互換性に関する優れたリソースです。:after http://www.quirksmode.org/css/beforeafter.htmlに固有のページがあります。

于 2012-07-23T19:40:19.800 に答える