结果如下：
FF3:
IE6(使用IE Tester):
IE7:
Safari4:
看来还是使用&-n-b-s-p-;的兼容性最好。
mt-inline-block的内容:
复制代码代码如下:html>body .mt-inline-block{display:-moz-inline-box;display:inline-block;}.mt-inline-block{position:relative;display:inline-block}* html .mt-inline-block{display:inline}*:first-child+html .mt-inline-b
在CSS布局中，行级元素（如`<span>`、`<a>`等）默认情况下不会占据整行的宽度，而是只占据其内容的宽度。然而，在实现某些设计时，我们可能希望行级元素能够拥有块级元素的特性，比如设置宽度、高度、内边距和外边距。这时，我们就需要用到`display: inline-block`属性。然而，`inline-block`在不同浏览器之间的兼容性问题一直是前端开发者面临的挑战。本文将深入探讨这一问题以及如何解决。
`display: inline-block`属性允许一个元素保持行内元素的行为（不会换行），同时能够像块级元素一样设置宽高。然而，不同浏览器对这一特性的支持程度不一，尤其是在老版本的IE（尤其是IE6和IE7）中，需要特殊的处理才能达到预期效果。
让我们看看在FF3、IE6（使用IE Tester模拟）、IE7和Safari4中，行级元素使用`display: inline-block`的表现。在这些浏览器中，使用`&-n-b-s-p-;`（即非中断空格字符实体）的兼容性最佳。以下是一个示例代码：
```css
html>body .mt-inline-block {
display: -moz-inline-box; /* Firefox 3 及更早版本的兼容 */
display: inline-block;
}
.mt-inline-block {
position: relative;
display: inline-block;
}
/* IE6 的兼容 */
* html .mt-inline-block {
display: inline;
}
/* IE7 的兼容 */
*:first-child + html .mt-inline-block {
display: inline;
}
```
这段代码中，`.mt-inline-block`类被用于设置元素为`inline-block`。注意到针对IE6和IE7的特殊声明，`* html .mt-inline-block`和`*:first-child + html .mt-inline-block`，这是经典的条件注释来解决IE的兼容性问题。`-moz-inline-box`是Firefox早期版本的`inline-block`替代方案。
此外，代码中还提到了一个问题：外层容器和行框之间的间距在不同浏览器中是不同的。例如，IE6为0，IE7为2px，而其他浏览器为1px。这可能导致布局的不一致，尤其是在需要精确控制间距的场景下。解决这个问题通常需要通过添加负的外边距或者调整元素的`line-height`属性来补偿。
对于IE6和7的`inline-block`支持，还可以使用`zoom`和`display: inline`的组合。例如：
```css
.ie67-inline-block {
zoom: 1; /* 触发hasLayout机制 */
display: inline;
*display: inline; /* IE6/7 */
}
```
`zoom: 1`在IE中触发了`hasLayout`机制，使得元素具有类似块级元素的特性。`*display: inline`是为了在IE6/7中隐藏`display: inline-block`的默认效果。
处理CSS的`inline-block`在多浏览器下的兼容性问题需要了解各浏览器对CSS的解析差异，并采取相应的 hack 或者前缀来保证在不同环境下的一致性。随着浏览器的更新迭代，现代浏览器对`display: inline-block`的支持已经非常好了，但为了兼容旧版浏览器，开发者仍需保持对这些技巧的关注。
