我们知道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之后
在ie7下呈现：
在ie7下呈现
在page中定义如下属性即可解决。
{
display: inline;
zoom: 1;
}
以上。
（注：前端开发，细碎繁杂。开这个专栏，仅仅是想把我平时工作学习中遇到的问题，给它记录下来，并没有做归纳梳理，所以不会那么详实连贯。大神大牛，请绕道。如果对你真有帮助，不吝赐我我一颗红心，或者赏我一颗糖吃，我也会满心笑纳，手动笑~~~）
