我在 IE 中遇到了一个非常奇怪的问题(专门在 IE 11 和 Windows 7 的边缘模式下测试过)。 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 , 和/或 padding: 0; margin: 0; , 没有明显的结果。
奇怪的是，如果我在 IE 检查器中基本上设置任何不同，包括更改 <li> 上的现有值，当重绘发生时，<li>突然弹回合适的高度。但是，如果我将任何这些更改放入我的样式表并重新加载，则会出现同样的问题。
此外，这个问题不是我的机器特有的。我让其他一些人(还有 Windows 7、IE11)对其进行了测试，并遇到了完全相同的问题。它也是特定于 IE 的。该菜单在所有其他(最新)浏览器中看起来都很好，但是当我在 IE10 和 9 的 11 或 11 的兼容模式下运行它时，我看到了同样的问题。
我也无法在 JSFiddle(或类似的)中创建简化的测试用例，因为我无法在 JSFiddle 中复制这个错误，这是最奇怪的部分。这也意味着我的 CSS 对它的影响比我想象的要大，但我唯一没有包含在上面的 CSS 中的是一些只添加颜色的样式和一个 border-bottom。 , 以及一些由 javascript 设置的内联样式来设置它的 top , left , 和 position正确地作为下拉菜单。
注意事项
我的文档类型是:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
而且我没有设置任何会强制 IE 进入旧兼容模式的元标记。
最后，这些<ul>菜单不是硬编码的，它们是由 ASP.NET 生成的 <asp:Menu>带有 RenderingMode="List" 的元素和 IncludeStyleBlock="false" .
截图
Chrome
Internet Explorer 11(非兼容模式)
上面是 <li> 的截图检查员突出显示有问题，显示没有填充或边距弥补这个
感谢您花时间阅读所有这些内容!如果您有任何指示或建议，我将很高兴听到!
最佳答案
解决了我的问题，感谢 @ns1234 帮助我解决了这个问题。
原来有 a bug in IE与动态修改内容和使用 position: relative 的组合有关.
Note that
position: relativedoes not trigger hasLayout, which leads to some rendering errors, mostly disappearing or misplaced content. Inconsistencies might be encountered by page reload, window sizing and scrolling, selecting. With this property, IE offsets the element, but seems to forget to send a “redraw” to its layout child elements (as a layout element would have sent correctly in the signal chain of redraw events).
本质上，要么不使用position: relative ，或者也添加一个溢出值，比如 overflow: hidden ，根据您的元素，解决此问题。
我通过添加 overflow: hidden 修复了它到我的子菜单 <ul> ，这导致 IE 正确重绘 <li>我遇到了麻烦。
关于html - 嵌套无序列表的 IE 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35089609/