Question

Here’s some code to illustrate the problem I’m running into. jsFiddle Demo

<div class="normal">
    <a href="#">Test</a>
    <a href="#">Test longer</a>
</div>
<div class="ib blockbyclass">
    <a href="#">Test</a>
    <a href="#">Test longer</a>
</div>
<div class="ib">
    <a href="#" style="display: block;">Test</a>
    <a href="#" style="display: block;">Test longer</a>
</div>

body{background-color: gray;}
div{float:left; margin: 5px;}
a {background-color: black; color: white;}
div.ib a {display: inline-block;}
div.normal > a {display: block;}
div.blockbyclass> a {display: block; }

I have a certain type of link that under most circumstances needs to be rendered as inline-block, but in a certain case needs to be rendered as block elements. Specifically, I want them to each appear on their own line and take up the entire area of the containing div. In this particular case, the div containing the links is set to float, so it will resize itself based on the largest of the links inside it. IE8, IE9, Firefox and Chrome render these links correctly, but no matter what I do IE7 refuses to forget the display: inline-block rule.

How can I make IE7 show these elements in “block” mode?

Answer 1

Your problem is a hasLayout trigger by the inline-block setting. To quote http://www.satzansatz.de/cssd/onhavinglayout.html (my emphasis added):

“The display-property differs: while ‘inline-block’ sets haslayout = true, the flag will not be reset to false later on by overriding the value with ‘block’ or ‘inline’ in another rule set.“

This is unlike most hasLayout triggers that can be reset. Therefore, I think to fix your problem, you need to think in reverse. You need to have block be your default for the a tag and then add a class to get your inline-block when you need it.

Sort of like http://jsfiddle.net/mmpX3/33/ where blockbyclass I replaced with inlinebyclass (which is really inline-block).

Updated Explanation: You probably noticed that when you switched to block after going from inline-block that it “sort of worked” (the lines of text still move down). That is because it is displaying as a block, but one that hasLayout as opposed to one that does not. I don’t know your particular situation, but if you can set a width on the containing div then a secondary solution to that I proposed above of “thinking in reverse” is to then set a width: 100% in conjunction with your “resetting” to block, like so: http://jsfiddle.net/mmpX3/64/.

Updated Caution: I don’t know if you have other css you plan to apply to the a tags, but if any of that triggers hasLayout then you will need to watch out for that (and perhaps find a different method). See for example this fiddle http://jsfiddle.net/mmpX3/69/ in which everything is set to block but because I put a min-height on the a tag, it still has the same issues as your original problem.