Question

我在IE中遇到了一个非常奇怪的问题（特别是在Windows 7上的IE 11和边缘模式下进行了测试）。 IE似乎为嵌套<ul>中的列表项添加了额外的填充/高度。屏幕截图和测试如下。如果有人可以指出我如何解决这个问题的正确方向，那就太好了，我尝试了一些不同的东西，不知道出了什么问题。

我有一个嵌套的<ul>，如下所示：

HTML

<ul>
    <li class='static'>Example Menu Item</li>
    <li class='static'>
       Another Example
       <ul class='dynamic'>
            <li class='dynamic'>Dropdown Menu Item</li>
       </ul>
    </li>
</ul>

CSS

ul.dynamic
{
    z-index: 10000;
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: #ccc;
    min-width: 200px;
}

li.dynamic
{
    display: block;
    white-space: nowrap;
    /* Fix for bug in IE10/11/Edge */
    list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

list-style-image设置，如果您想知道，是对我在IE中发现的先前错误的修复，其中无论list-style或list-style-type设置如何，子菜单仍会有旁边的列表“点”。编码数据是最小的透明图像。

测试

我尝试过很多不同的事情，从设置<ul>和<li>到固定高度，box-sizing: (content-box|border-box)，white-space: nowrap和/或{{ 1}}，没有明显的结果。

奇怪的是，如果我在IE检查器中以不同的方式设置基本上任何，包括更改padding: 0; margin: 0;上的现有值，当重绘时，<li>会突然拍摄回到正确的高度。但是，如果我在样式表中添加任何这些更改并重新加载，则会出现同样的问题。

此外，此问题并非特定于我的机器。我有其他几个（也是Windows 7，IE11）测试它并遇到完全相同的问题。它也是IE特有的。菜单在其他所有（最新）浏览器中看起来都很好，但是当我在11或11的IE10和9的compat模式下运行时，我看到同样的问题。

我也无法在JSFiddle（或类似的）中创建一个简化的测试用例，因为我无法在JSFiddle中复制这个bug，这是最奇怪的部分。这也意味着我的CSS比我想象的更多地影响它，但我在CSS上面没有包含的唯一的东西是一些只添加颜色和颜色的样式。一个<li>，以及一些由javascript设置的内联样式，可以将其border-bottom，top和left正确设置为下拉菜单。

备注

我的文档类型是：

position

而且我没有设置任何会强制IE进入较旧的compat模式的元标记。

最后，这些<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">菜单不是硬编码的，它们由带有<ul>和<asp:Menu>的ASP.NET RenderingMode="List"元素生成。

截图

铬

Internet Explorer 11（无压缩模式）

以上是有问题IncludeStyleBlock="false"的一个镜头，检查员突出显示它，显示没有填充或边距构成

感谢您花时间阅读所有这些内容！如果您有任何指示或建议，我会很高兴听到它！

Answer 1

想出了我的问题，请大家帮助@ ns1234帮我解决这个问题。

原来有a bug in IE与动态修改内容和使用position: relative的组合相关。

请注意，position: relative不会触发hasLayout，这会导致某些渲染错误，主要是消失或放错位置的内容。页面重新加载，窗口大小调整和页面调整可能会遇到不一致滚动，选择。使用此属性，IE可以抵消元素，但是似乎忘了发送一个“重绘”到它的布局子元素（作为一个 layout元素将在重绘的信号链中正确发送事件）。

实质上，要么不使用position: relative，要么还要向您的元素添加溢出值，例如overflow: hidden，以解决此问题。

我通过将overflow: hidden添加到我的子菜单<ul>来修复它，这导致IE正确重新绘制了我遇到问题的<li>。

Answer 2

此CSS对我有用：

overflow: hidden;
height: auto;

嵌套无序列表的IE问题

HTML

CSS

测试

备注

截图

铬

Internet Explorer 11（无压缩模式）

2 个答案: