像下面图中的布局，如果排列的元素是登高的话，相信很多人都会使用浮动来布局，不过如果元素不等高的话，不添加多余的标签，浮动布局是很难实现下图中的效果。如果遇到这种情况，可以使用inline-block来布局。
标题中的“使用`font-size: 0px`来制作跨浏览器的`inline-block` CSS属性”指的是在CSS布局中利用`font-size`属性为0来解决`inline-block`元素间默认存在的间距问题，以实现更精确的布局兼容性。描述中提到的布局场景是一个不等高的元素排列，通常情况下，如果元素需要堆叠在一起，人们可能会使用浮动布局（如`float`），但在元素高度不一致时，浮动布局就显得力不从心。此时，`inline-block`布局能提供一个更为灵活的解决方案。
`inline-block`属性使得元素既能保持内联元素的特性（即不占据整行，允许其他元素并排显示），又能像块级元素一样设置宽高。然而，不同浏览器对`inline-block`的支持程度不同，尤其是在较旧版本的IE（如IE6和IE7）中，需要使用特定的hack方法来模拟`inline-block`的行为。常见的解决方式是将`display`属性设置为`inline`并结合`zoom: 1`，以触发IE的hasLayout机制。
在实现`inline-block`布局时，开发者可能遇到的一个问题是Firefox、Safari、Opera和IE8+等现代浏览器会在相邻的`inline-block`元素间产生3像素的间距。这是因为HTML源码中的换行符被浏览器解析为一个空格，导致了这个间距。为了消除这个间距，一种常见方法是将包含`inline-block`元素的父级容器的`font-size`设置为0，这样换行符不会产生空格效果。然后，可以为`inline-block`元素单独设置所需的字体大小，以保持文本的正常显示。
示例代码中，`.font0`类就是用来将父级容器的`font-size`设置为0，而`.inline-block`类则为每个`inline-block`元素恢复了字体大小。通过这种方法，我们可以在不破坏代码可读性的情况下，实现各浏览器之间的`inline-block`布局兼容性。
总结来说，本文探讨的是如何利用`font-size: 0px`和`inline-block`属性在跨浏览器环境中创建紧密排列的元素布局。通过消除`inline-block`元素间的间距，我们可以创建更复杂的布局，同时确保在多种浏览器上表现一致。这种方法对于那些需要精细控制元素排列和间距的网页设计尤其有用。
