我們知道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>
運行的結(jié)果會呈現(xiàn)如下結(jié)果：
運行結(jié)果
我們會發(fā)現(xiàn)并不是我們想要的結(jié)果，他并沒有在一行顯示寸潦，在右邊會有默認(rèn)的右邊距色鸳。這是html換行引起的，現(xiàn)在我們改變html的書寫結(jié)構(gòu)：
改變html的書寫結(jié)構(gòu)
修改后顯示
我們發(fā)現(xiàn)page1和page2之間的間距不見了见转。這樣是能解決間距問題命雀，但同時給我們帶的是html代碼結(jié)構(gòu)層次不夠清晰，有沒有其他方法解決呢斩箫？
當(dāng)然有吏砂。
我們給他們的父級main設(shè)置font-size：0即可解決撵儿，也不用在改變html代碼結(jié)構(gòu)。因為font-size屬性是可以繼承的狐血，所以在給父級設(shè)置font-size：0后统倒，他本身要重新定義設(shè)置font-size值。
解決bug之后
在ie7下呈現(xiàn)：
在ie7下呈現(xiàn)
在page中定義如下屬性即可解決浴鸿。
{
display: inline;
zoom: 1;
}
以上。
（注：前端開發(fā)弦追，細(xì)碎繁雜岳链。開這個專欄，僅僅是想把我平時工作學(xué)習(xí)中遇到的問題劲件，給它記錄下來掸哑，并沒有做歸納梳理，所以不會那么詳實連貫零远。大神大牛苗分，請繞道。如果對你真有幫助牵辣，不吝賜我我一顆紅心摔癣，或者賞我一顆糖吃，我也會滿心笑納纬向，手動笑~~~）
