IE7 - display: block within does not disp

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, i.e. 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

With block you have to give the width also for the element.For example:- http://jsfiddle.net/b3KaM/8/