IE10 悬停菜单显示答案

【问题标题】：IE10 Hover Menu DisplayIE10 悬停菜单显示
【发布时间】：2013-05-17 05:35:21
【问题描述】：

昨天刚刚在 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：添加来自不同浏览器的屏幕截图以进行比较：

Chrome (25.0.1364.172)
火狐 (19.0.2)
IE10 (10.0.9200.16521)
Opera (11.64)

【问题讨论】：

标签： css internet-explorer-10

【解决方案1】：

这应该可以按预期工作：http://jsfiddle.net/ESd8y/1/

从表格中删除背景颜色并将其添加到tr。由于边框没有在表格中折叠，您会看到间隙，因此您需要折叠它们：

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

进行这些更改后，它应该会按预期工作。

【讨论】：