兼容性的 inline-block 属性

一年前，关于inline-block属性的文章在网上还寥寥无几。为了让大家更深入地理解这一属性，有人精心撰写了《display:inline-block的深入理解》一文。随着时光推移，inline-block属性的应用需求愈加旺盛。遗憾的是，尽管该属性已得到Firefox3 beta、IE8 beta、Opera和Safari的支持（之前仅有Opera和Safari支持），但在IE6、IE7中，我们仍需要通过触发hasLayout来模拟其效果。至于Firefox2，它拥有-moz-inline-box和-moz-inline-stack这两个私有属性（关于这两个属性的比较，可参见秦歌的《display:inline-block的应用两例》）。

在实际应用中，-moz-inline-box会导致元素间的对齐问题。虽然Firefox还有一个私有属性-moz-box-align可以帮助解决对齐问题，但依旧难以完全避免潜在的问题。相比之下，-moz-inline-stack的表现更接近于inline-block，这一点在Firefox3中尤为明显。但使用-moz-inline-stack时，会出现一个bug：如果一个display:-moz-inline-stack;的元素外层元素是display:inline;，则会在Firefox中导致包含的链接无法点击。这个问题可以通过设置position:relative;来解决。

为了模拟inline-block的效果，我们采用了如下代码：

首先使用display:inline-block;以适配Firefox3 beta、IE8 beta、Opera和Safari。对于Firefox，我们使用了其私有属性display:-moz-inline-stack;（也可使用-moz-inline-box）。

在IE下，我们通过触发hasLayout来模拟inline-block的效果，并设置zoom:1;以实现这一点。为了让元素表现得像inline元素，我们设置了display:inline;当在IE下触发hasLayout后。

如果需要隐藏文字，可以使用text-indent:-9999px;text-indent:0;font-size:0;line-height:0;这组属性。还有更为简化的方法：将line-height设置为一个超级大值，同时将font-size设为0。

为了隐藏溢出的内容，我们设置了overflow:hidden;。针对Opera中可能出现的较大的垂直对齐问题，我们使用了vertical-align:middle;进行调整。为元素设置特定的width和height值（非auto）。通过这样的设置，我们可以使元素在保持inline-block属性的展现出我们所期望的样式效果。