0

问题摘录：我有一个适用于所有浏览器的菜单，但在 IE7 上存在问题。我解决了投掷问题，zoom:1但通常hasLayout相关的问题涉及浮动、位置和东西。为什么这次成功zoom了？

我有一个适用于所有浏览器（甚至在 IE8+ 上）的菜单，如下所示： 每个浏览器上的菜单

由一个使用 .png BG 的 1px 边框和一个具有图标和文本的块LI组成。DIVA

恢复的 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.activeBG。

不幸的是，我有义务让它在 IE7 标准模式下工作（这解释了为什么我使用带有 .png 而不是 RGBA 边框的 div），它看起来像这样：

IE7上的菜单

是的。li在 start和 "border"之间有一个空格div。我已经尝试了以下方法：

它们都没有工作，并且开发工具上没有任何内容指向边距或边框（全部为 0 和!important）。

所以问题是： 没有浮动元素，没有绝对定位的东西，只有块。为什么zoom:1（哪个触发器hasLayout）让所有该死的空间消失？

JsFiddle（有一些额外的标记 div 但忽略它们，为了简单起见，我删除了更多内容）

我知道这是 IE 的“功能（错误）”的一部分，但我一直在寻找其他东西作为答案。

4

1 回答 1

1

列表

列表受应用于列表 (ol, ul) 或列表元素 (li) 的布局影响。不同版本的 IE 反应不同。最明显的影响是在列表标记上（不需要标记的完全定制的列表不会有这些问题。）标记可能是通过在内部添加一些在某种程度上“附加”到列表元素的元素（通常挂起出他们），似乎相当不稳定。不幸的是，作为“内部”对象，它们无法被访问以尝试纠正错误行为。

最明显的影响是：

应用于列表的布局使标记消失或位置不同/错误。

有时可以通过更改列表元素的边距来恢复它们。这看起来像是布局元素倾向于裁剪悬挂在其中的内部元素这一事实的结果。

应用于列表元素的布局会产生与上述相同的问题，以及更多问题（列表项之间的额外垂直空间）

另一个问题是（在有序列表中）任何具有布局的列表元素似乎都有自己的计数器。假设我们有一个包含五个元素的有序列表，其中只有第三个元素具有布局。我们会看到这个：

1... 2... 1... 4... 5...

此外，当具有布局的列表元素显示在多行时，标记在底部垂直对齐（而不是在顶部，如预期的那样。）

其中一些问题无法解决，因此当需要标记时，最好避免在列表和列表元素上进行布局。如果需要应用某个维度，则最好将其应用于其他元素：例如，可以将宽度应用于外部包装器，将高度应用于每个列表项的内容。

当任何 li 的内容是带有 display: 块的锚时，IE 中列表的另一个常见问题会发生。在这些情况下，列表项之间的空白不会被忽略，并且通常显示为每个 li 的额外行。避免这种额外垂直空间的方法之一是为块锚提供布局。这还具有使锚点的整个矩形区域可点击的好处。

欲了解更多详情，请访问： http: //www.satzansatz.de/cssd/onhavelayout.html

于 2013-05-10T02:27:18.797 回答