css - IE7 - UL > LI 菜单带有 'extra' 填充 - 为什么缩放 :1 (`hasLayout` ) makes it work?

Question

问题摘录:我有一个菜单可以在所有浏览器中使用，但在 IE7 上有问题。我解决了抛出 zoom:1 但通常与 hasLayout 相关的问题涉及 float 、位置和内容。为什么这次 zoom 成功了？

我有一个适用于所有浏览器(甚至在 IE8+ 上)的菜单，如下所示:

由一个 LI 组成，其中包含一个 DIV，使用 .png BG 作为 1px 边框，还有一个带有图标的 block 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 的开头和“border” div 之间有一个空格。我已经尝试过以下方法:

• > display:inline-block then block
• > remove tabs and white spaces on the html
• > font-size and line-height 0 on separator

它们都不起作用，开发工具上也没有任何内容指向页边距或边框(所有 !important 均为 0)。

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

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

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

Answer 1

Lists

Lists are affected by layout applied either to the list (ol, ul) or to the list elements (li). Different versions of IE react differently. The most evident effects are on the list markers (fully customized lists where the markers are not required won't have these problems.) The markers are probably created by internally adding some elements that are somewhat “attached” to the list elements (usually hangs out of them) and seems rather unstable. Unfortunately, being “internal” only objects, they cannot be accessed to try to correct mis-behaviours.

The most evident effects are:

Layout applied to a list makes the markers to disappear or to be differently/wrongly positioned.

Sometimes they can be restored by changing margins on the list elements. This looks like a consequence of the fact that a layout element tends to crop internal elements hanging out of it.

Layout applied to list elements creates the same problems as above, and more (extra vertical space between list items)

A further problem is that (in ordered lists) any list element with layout seems to have its own counter. Let's say we have an ordered list with five elements where only the third has layout. We'll see this:

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

Moreover when a list element with layout displays on multiple lines the marker is vertically aligned at the bottom (not at the top, as expected.)

Some of these problems cannot be cured, so when the markers are desired it's better to avoid layout on lists and list elements. If it's necessary to apply some dimension, this is better applied to other elements: for example a width can be applied to an external wrapper, and a height to the content of each list item.

Another common problem with lists in IE occurs when the content of any li is an anchor with display: block. In these conditions the white space between list items is not ignored and usually displayed as an extra line for each li. One of the methods to avoid this extra vertical space is to give layout to the block anchors. This also has the benefit of making the whole rectangular area of the anchors clickable.

更多详情请访问:http://www.satzansatz.de/cssd/onhavinglayout.html