inline-block的兼容bug

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

<style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background: #142131;
        }
        .main{
            width: 980px;
            height: 96px;
            margin: 100px auto;
            background: #f7f7f7;
        }
        .page{
            width: 25%;
            height: 96px;
            display: inline-block;
            line-height: 96px;
            text-align: center;
            color: #ffffff;
            font-size: 28px;
        }
        .page1{
            background: orangered;
        }
        .page2{
            background: #0e5280;
        }
        .page3{
            background: #247ee0;
        }
        .page4{
            background: #009300;
        }
    </style>
 <div class="main">
        <div class="page page1">page1</div>
        <div class="page page2">page2</div>
        <div class="page page3">page3</div>
        <div class="page page4">page4</div>
 </div>

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

运行结果

我们会发现并不是我们想要的结果，他并没有在一行显示，在右边会有默认的右边距。这是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;
}

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