0

昨日、Windows 7でIEをバージョン10にアップグレードしましたが、ホバーメニューに問題があります。

私が試した他のブラウザ（以前のバージョンのIEを含む）では正常に動作するようですが、IE10ではポップアップテーブルメニューの背景と境界線が失われます。最初はページの読み込みで問題ありませんが、アイテム間を移動すると、テーブルの背景色と境界線が失われます（何らかの理由でテーブルの幅が0になるように見えます）。

サンプルコードは次のとおりです。

<!DOCTYPE html>
<html>
    <head>
        <title>IE 10 Menu Test Page</title>
    </head>
    <style>
        li {
            background-color: #cccccc;
            list-style: none;
            position: relative;
            width: 80px;
        }
        li table {
            background-color: #cccccc;
            border: 1px solid #999999;
            display: none;
            left: 75px;
            position: absolute;
            top: 0;
            z-index: 1000;
        }
        li:hover table {
            display: block;
        }
    </style>
    <body>
        <ul>
            <li>Fish
                <table>
                    <tbody>
                        <tr><td>Cod</td></tr>
                        <tr><td>Salmon</td></tr>
                    </tbody>
                </table>
            </li>
            <li>Fruits
                <table>
                    <tbody>
                        <tr><td>Apple</td></tr>
                        <tr><td>Orange</td></tr>
                    </tbody>
                </table>
            </li>
            <li>Grains
                <table>
                    <tbody>
                        <tr><td>Rice</td></tr>
                        <tr><td>Wheat</td></tr>
                    </tbody>
                </table>
            </li>
            <li>Meat
                <table>
                    <tbody>
                        <tr><td>Beef</td></tr>
                        <tr><td>Chicken</td></tr>
                    </tbody>
                </table>
            </li>
            <li>Vegetables
                <table>
                    <tbody>
                        <tr><td>Carrot</td></tr>
                        <tr><td>Tomato</td></tr>
                    </tbody>
                </table>
            </li>
        </ul>
    </body>
</html>

IEバージョン：10.0.9200.16521

助けてくれてありがとう！

編集：人々が試してみるために、上記の例のjsfiddleをここに追加しました：http：//jsfiddle.net/3Babs/

*編集2：比較するためにさまざまなブラウザからのスクリーンショット画像を追加しました：

  1. クローム（25.0.1364.172）
    クロム

  2. Firefox（19.0.2）
    Firefox

  3. IE10（10.0.9200.16521）
    IE10

  4. オペラ（11.64）
    オペラ

4

1 に答える 1

0

これは期待どおりに動作するはずです: http://jsfiddle.net/ESd8y/1/

テーブルから背景色を削除し、tr代わりに追加します。テーブルで境界線が折りたたまれていないためにギャップが表示されるため、それらを折りたたむ必要があります。

li table {
        border-collapse: collapse;
        /* other styles here, except background-color */
    }
li table tr {
    background-color: #cccccc;
}

これらの変更を行うと、期待どおりに動作するはずです。

于 2013-05-16T21:35:21.947 に答える