IE7-UL> LI菜单与'extra'填充 - 为什么缩放：1（`hasLayout`）使它的工作？ [英] IE7 - UL > LI menu with 'extra' padding - Why zoom:1 (`hasLayout`) makes it work?

问题描述

问题的摘要：我有一个菜单，在每个浏览器，但在IE7上有bug。我解决了抛出 zoom：1 但通常 hasLayout 相关的问题涉及浮点，位置和东西。为什么这个时候缩放使其有效？

我有一个菜单，甚至在IE8 +），它看起来像这样：

包含 LI ，其中包含 DIV 作为1px边框使用。 png BG和具有图标和文本的块 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 。

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

是的。在 li 的开始和border div 之间有一个任何空格。我已尝试下列方法：

• 显示：inline-block then block


• 删除html上的选项卡和空格


• 分隔符上的font-size和line-height 0
• 
  

它们都没有工作，并且没有指向边框或边框的Dev工具（都是0， 没有浮动的元素，没有绝对定位的东西，只是块。为什么 zoom：1 （触发 hasLayout ）会让所有已丢弃的空格消失？

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

我知道它是IE的特性（错误）的一部分，但我正在寻找别的东西一个答案。

解决方案

列表

列表受应用于列表（ol，ul）或列表元素（li）的布局的影响。不同版本的IE会有不同的反应。最明显的效果是在列表标记（完全自定义列表，其中不需要标记不会有这些问题。）标记可能是通过内部添加一些元素，被附加到列表元素（通常挂起出来），似乎相当不稳定。不幸的是，作为内部只有对象，它们不能被访问来尝试纠正错误行为。

最明显的效果是：

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

有时，可以通过更改列表元素。这看起来像一个布局元素倾向于裁剪内部元素挂起来的结果。

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

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

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

此外，当具有布局的列表元素显示在多行上时，标记在底部垂直对齐（不按照预期。）

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

在IE中的列表的另一个常见问题发生在任何li的内容是具有display：block的锚点时。在这些条件下，列表项之间的空格不会被忽略，通常显示为每个li的额外行。避免这种额外垂直空间的方法之一是给块锚点布局。

有关详细信息，请访问： http://www.satzansatz.de/cssd/onhavinglayout.html

Excerpt of the question: I have a menu which works in every browser but was buggy on IE7. I solved throwing zoom:1 but normally the hasLayout related problems involves float, position and stuff. Why this time zoom made it work?

I have a menu which works in every browser (even on IE8+) which looks like this:

Consists of a LI which holds a DIV working as a 1px border using a .png BG and a block A that have an icon and text.

The resumed HTML would be ul.adminMenu>li>(div.menuBorder)+(a{link}):

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

The li.active gets a darker BG.

Unfortunately I'm obligated to make it work on IE7 Standards Mode (That explains why I use a div with .png instead of RGBA border) which is looking like this:

Yes. There is a whatsoever space between the start of li and the "border" div. I already tried the following methods:

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

None of them have worked and there is nothing on Dev Tools which points to a margin or border (all are 0 with !important).

So the question is: There are no floated elements, no absolute positioned things, just blocks. Why zoom:1 (which trigger hasLayout) make all damned spaces go away?

The JsFiddle (There is some extra markup divs but ignore them, had more stuff that I removed for the sake of simplicity)

I know it's part of IE 'features (bugs)' but I was looking for something else as an answer.

解决方案

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.

For more detail visit : http://www.satzansatz.de/cssd/onhavinglayout.html

这篇关于IE7-UL> LI菜单与'extra'填充 - 为什么缩放：1（`hasLayout`）使它的工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！