Question

昨天刚刚在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）
Firefox（19.0.2）
IE10（10.0.9200.16521）
Opera（11.64）

Answer 1

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

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

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

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

IE10悬停菜单显示

1 个答案: