IE7 -显示：块<a>内</a> <li> <a>无法正确显示</a>

Question

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, ie it's an Internet Explorer bug with no workaround?

Answer 1

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.

Answer 2

使用块，您还必须为元素提供宽度。例如： - http://jsfiddle.net/b3KaM/8/