IE7 - display：block< a>在< li>无法正确显示 [英] IE7 - display: block <a> within <li> does not display correctly

问题描述

如果您查看此代码： http://jsfiddle.net/b3KaM/2/

在IE7中，< a> 标签不能延伸到其父 li> width即使 display：block; 已设置。您可以看到区别的背景颜色设置为红色的列表项和黄色的链接。

它显然工作正常在FF / Chrome和朋友。

编辑：
这里的复杂性是我不能设置固定宽度 - 链接文本应该保持在一行，整个列表应该扩展为需要。

我知道这是以前被问过的，我发现了几个问题，但我找不到一个有效的解决方案这个问题 - 任何

如果没有 - 是否可以说是不可能在IE7上实现与其他浏览器相同的结果，即它是一个Internet Explorer错误，没有解决方案

这个问题是由IE7中的渲染现象引起的，并且 satzansatz.de/cssd/onhavinglayout.htmlrel =nofollow>称为 hasLayout 。

为了解决这个问题，你必须简单地阻止 a 元素从获取布局。

有大量列举的元素会导致元素获取布局。

您的 a 元素目前有 overflow：hidden 和 min-height 设置。如果删除这些属性，它将在IE7中工作。

If you look at this code: http://jsfiddle.net/b3KaM/2/

in IE7 the <a> tags do not stretch to their parent <li> width even if display: block; is set. You can see the difference with the background color set to red on the list items and yellow on the links.

it obviously work fine in FF/Chrome & friends.

EDIT: the complication here is that I cannot set a fixed width - the link text should stay on one line and the whole list should expand as needed.

I'm aware that this as been asked before and I've found a few questions on SO but I could not find a valid solution to this issue - any ideas anyone?

If not - is it safe to say that is not possible to achieve the same result on IE7 as on other browsers, i.e. it's an Internet Explorer bug with no workaround?

解决方案

This problem is caused by a rendering phenomenon in IE7 and lower known as hasLayout.

To fix the problem, you must simply prevent your a elements from "gaining layout".

Unfortunately, there's massive list of stuff that causes an element to "gain layout".

Your a elements currently have overflow: hidden and min-height set. If you remove those properties, it will work in IE7.

这篇关于IE7 - display：block< a>在< li>无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！