IE7 - UL > LI菜单上有‘额外’填充-为什么缩放:1(‘`hasLayout`’)使它工作？

Question

问题的摘录:我有一个菜单，它在每个浏览器上都能工作，但是在IE7上却是个错误。我解决了抛出zoom:1的问题，但通常情况下，与hasLayout相关的问题包括浮点、位置和其他问题。为什么这次zoom让它工作呢？

我有一个在每个浏览器(甚至在IE8+上)都能工作的菜单，如下所示：

​

它包含一个LI，它保存一个DIV，使用.png BG作为1px边框工作，以及一个具有图标和文本的块A。

恢复的HTML将是ul.adminMenu>li>(div.menuBorder)+(a{link})。

<ul class="adminMenu">
    <li>
        <div class="menuBorder"></div>
        <a href="">link</a>
    </li>
    (...other li's...)
</ul>

li.active得到一个更暗的BG。

不幸的是，我有义务让它在IE7标准模式下工作(这解释了为什么我在.png中使用div而不是RGBA边框)，它如下所示：

​

​

是。在li的开头和“div”的“边界”之间有一个空隙。我已经尝试过以下方法：

• 显示:内联块然后块
• 删除html上的制表符和空格。
• 分隔符上的字体大小和线条高度为0

它们都没有工作，开发工具上也没有指向边距或边框的任何东西(在!important中都是0)。

所以问题是：没有浮动元素，没有绝对定位的东西，只有块。为什么zoom:1 (触发 hasLayout**)使所有该死的空间消失？**)

The JsFiddle (有一些额外的标记div，但是忽略它们，为了简单起见，我删除了更多的东西)

我知道这是IE‘特性(Bug)’的一部分，但我正在寻找其他的答案。

Answer 1

列出 列表受应用于列表(ol、ul)或列表元素(li)的布局的影响。不同版本的IE反应不同。最明显的影响出现在列表标记上(在不需要标记的情况下，完全定制的列表不会出现这些问题)。标记可能是通过内部添加一些元素来创建的，这些元素有些“附加”于列表元素(通常挂在列表元素中)，并且看起来相当不稳定。不幸的是，作为“内部”对象，它们不能被访问以试图纠正错误行为。 最明显的影响是： 应用于列表的布局会使标记消失或被不同/错误地定位。 有时，可以通过更改列表元素的边距来恢复它们。这看起来像是一个事实的结果，一个布局元素倾向于裁剪挂在其中的内部元素。 应用于列表元素的布局会产生与上面相同的问题，以及更多的问题(列表项之间的额外垂直空间)。 另一个问题是(在有序列表中)任何具有布局的列表元素似乎都有自己的计数器。假设我们有一个有五个元素的有序列表，其中只有第三个元素有布局。我们会看到这个： 1...2...1...4.5... 此外，当布局列表元素显示在多行时，标记在底部垂直对齐(而不是像预期的那样在顶部对齐)。 其中一些问题无法解决，因此当需要标记时，最好避免在列表和列表元素上进行布局。如果有必要应用某些维度，则最好将其应用于其他元素:例如，可以将宽度应用于外部包装器，将高度应用于每个列表项的内容。 IE中列表的另一个常见问题发生在任何li的内容都是带有display的锚点时:块。在这种情况下，列表项之间的空白不会被忽略，并且通常显示为每个li的额外行。避免这种额外垂直空间的方法之一是给块锚布置布局。这也有好处，使整个矩形面积的锚可点击。

欲了解更多细节，请访问：http://www.satzansatz.de/cssd/onhavinglayout.html