inline-block的兼容bug

我们知道inline-block可以代替float，避免清除浮动等一系列不必要的麻烦。
但是inline-block也有他自身的缺陷，在IE6，IE7下也不兼容。
我们先说说他自身的缺陷。
先看如下代码

 

        
page1
        
page2
        
page3
        
page4
 

运行的结果会呈现如下结果：

运行结果

我们会发现并不是我们想要的结果，他并没有在一行显示，在右边会有默认的右边距。这是html换行引起的，现在我们改变html的书写结构：

改变html的书写结构

再看他现在的显示：

修改后显示

我们发现page1和page2之间的间距不见了。这样是能解决间距问题，但同时给我们带的是html代码结构层次不够清晰，有没有其他方法解决呢？
当然有。
我们给他们的父级main设置font-size：0即可解决，也不用在改变html代码结构。因为font-size属性是可以继承的，所以在给父级设置font-size：0后，他本身要重新定义设置font-size值。

解决bug之后

兼容性：IE6、IE7不识别inline-block但可以触发块元素，其它主流浏览器均支持inline-block。
在ie7下呈现：

在ie7下呈现

要兼容如何解决他呢？
在page中定义如下属性即可解决。

{
 display: inline;
    zoom: 1;
}

以上。
（注：前端开发，细碎繁杂。开这个专栏，仅仅是想把我平时工作学习中遇到的问题，给它记录下来，并没有做归纳梳理，所以不会那么详实连贯。大神大牛，请绕道。如果对你真有帮助，不吝赐我我一颗红心，或者赏我一颗糖吃，我也会满心笑纳，手动笑~~~）