html - 如何在 IE7 中用 "display:inline-block"覆盖 "display: block"？

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; }

我有一种特定类型的链接，在大多数情况下需要呈现为内联 block ，但在某些情况下需要呈现为 block 元素。具体来说，我希望它们各自出现在自己的行中并占据包含 div 的整个区域。在这种特殊情况下，包含链接的 div 设置为 float ，因此它将根据其中最大的链接调整自身大小。 IE8、IE9、Firefox 和 Chrome 正确呈现这些链接，但无论我做什么，IE7 都拒绝忘记 display: inline-block 规则。

如何让 IE7 以“ block ”模式显示这些元素？

Answer 1

根据这个article display:inline-block 与 IE7 中的 display:inline 具有相似的行为，因此您只需稍作改动即可支持 IE7(使用 simple hack for IE ):

div.ib a {
   display: inline-block; 
   *display: inline; /* IE7 and below */ 
}

希望this按预期工作。

---

编辑:

好的。问题在于属性 hasLayout 解释 here . zoom:1 和 height:any_value 都激活了 hasLayout，所以同时 display:inline-block; *display:inline 用于覆盖下一个 display:block 声明，放置一个 height:30px(例如)返回属性 hasLayout。所以要做的就是删除 hasLayout，正如它在 this article 中所说的那样。 .

我有this demo展示它是如何工作的。因为 height 实际上是不可更改的，所以我使用 padding-bottom 和 font-size 来模拟其他浏览器中的 height。请注意，最宽元素的 width 保持不变。

---

编辑 2:

有没有体贴jQuery解决方案？ (仅在 IE7 中给元素不同的 width)