Как я могу переопределить «display: inline-block» с «display: block» в IE7?

Question

Вот код, иллюстрирующий проблему, с которой я столкнулся. 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; }

У меня есть определенный тип ссылки, который в большинстве случаев должен отображаться как inline-block, но в определенном случае должен отображаться как блочный элемент. В частности, я хочу, чтобы каждый из них появлялся в отдельной строке и занимал всю область содержащего элемента div. В этом конкретном случае div, содержащий ссылки, устанавливается на плавающее, поэтому он будет изменять свой размер в зависимости от самой большой из ссылок внутри него. IE8, IE9, Firefox и Chrome правильно отображают эти ссылки, но независимо от того, что я делаю, IE7 отказывается забыть правило display: inline-block.

Как я могу заставить IE7 показывать эти элементы в режиме "блока"?

Answer 1

display: inline-block несовместимо в IE7 для элементов, которые не являются встроенными по умолчанию, поэтому IE будет игнорировать это правило для DIV.Если вы, например, измените DIV на SPAN, этот пример должен работать.