淺談IE6/7對display:inline-block的支持

到底什麼是inline-block？

       設置了inline-block的元素創建了一個行級的塊容器，該元素內部即內容被格式化爲一個塊級元素，同時元素本身被格式化爲一個行內元素。直白點就是inline-block的元素既有block元素可以設置高度寬度的特性，同時又具有inline元素默認不換行的特性。

      通俗的分開對inline元素和block元素來說就是：inline元素設置了該屬性以後，任保持默認的不換行的特性，但其內部表現得就是一個block元素，可以設置高度寬度等。而block元素設置了該屬性以後，表現得就是一個行內元素，持有不換行的特性，但實質上任由block的特性，可以設置高度寬度。

IE的inline-block

很多人都說ie6/7不支持inline-block特性，但是在msdn微軟開放社區裏找到證據，ie從5.5開始就已經對inline-block支持了，（證據鏈接http://msdn.microsoft.com/zh-cn/library/ie/ms530751(v=vs.85).aspx），只是表象形式上有所偏差。現在看一看IE6中inline元素和block元素的表現：

（1）inline元素的display：inline-block

<a href="">one</a>
<a href="">two</a>
<a href="">three</a>
<a href="">four</a>

a{
    background: #ddd;
    line-height: 1.5;
    width: 50px;
    display: inline-block;
	}

ie及chrome下的效果：

（2）block下的表現：

<p>nihhjksak</p>
<p>ghjdbjsbj</p>
<p>cbjshdbcjs</p>
<p>bhjdwbjhjk</p>

p{
	background: #eaa;
	width: 90px;
	height: 40px;
	display: inline-block;
	}

chrome下的效果：

IE下的效果：

從差異上可以看出ie和其他瀏覽器的表現形式上不一樣，即使是inline-block觸發了haslayout還是不具有inline-block不換行的特性，不過想要block支持inline-block元素的特性，我們可以在其基礎上添加：

*p{
	display: inline;
	zoom:1;
	height: 30px;
	margin-right: 2px;
	}

效果如下：

設置display：inline，使block元素變爲inline元素，然後設置zoom：1，使其具有佈局，就可以設置高度寬度等特性。

總結來說就是：ie中的display：inline和zoom：1相當於display：inline-block。

參考來自520UID的“你真的懂display:inline-block嗎”
http://www.520ued.com/article/index/arcid/17.html