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. 火狐 (19.0.2)
    火狐

  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 回答