我的收集：（轉）display:inline-block

一，內聯元素與塊級元素

以前我寫過一篇文章詳細闡述過兩者的概念，若是不清楚的同窗情點擊塊級元素與內聯元素.

二，display:inline-block將對象呈遞爲內聯對象，可是對象的內容做爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，容許空格。可是如今的瀏覽器廠商有一個讓人嘔吐的行爲，就是越有用的東西，他越讓你用的不方便，display目前只有safri和chorme可以完美支持，只是ie8和firefox4之後的版本才慢慢支持。下面給你們舉例

例子1

html代碼：

代碼以下	複製代碼
<div>1</div> <div>2</div> css代碼： div{display:inline-block;width:100px;height:100px;background:#f00;}

這段代碼在ie8以上版本顯示正常，已經其餘的瀏覽器都是正常的，而惟獨在ie67下無效

而後經過css hack進行處理後的css爲

代碼以下	複製代碼
div{display:inline-block;width:100px;height:100px;background:#f00;*display:inline;*zoom:1}

而後獲得了預期的效果

例子2

html代碼：

代碼以下	複製代碼
<a>1</a> <a>2</a> css代碼： a{display:inline-block;width:100px;height:100px;background:#f00;}

這段代碼在全部瀏覽器下都是正常顯示

下面來作一個詳細的測試，分別看看 IE6 中 inline 元素和 block 元素的表現：

1）inline 元素 display:inline-block

IE6 中截圖以下：

代碼以下	複製代碼
.dib-inline, .dib-block { width:100px; height:30px; line-height:30px; text-align:center; } .dib-inline { display:inline-block; }

測試代表：IE6 中 inline 元素只要觸發了 hasLayout 其表現就相似於 inline-block，這裏設置 display:inline-block; 或者 zoom:1; 等其餘屬性值能夠觸發 hasLayout ，表現出來是同樣的。

 
2）block 元素 display:inline-block

IE6 中截圖以下：

代碼以下	複製代碼
.dib-inline, .dib-block { width:100px; height:30px; line-height:30px; text-align:center; } .dib-block{ display:inline-block; }

測試代表：IE6 中 block 元素即便觸發了 hasLayout 也不能具備 inline-block 元素不換行的特性。想要 block 元素支持 inline-block 元素的特性，咱們能夠這樣作：

代碼以下	複製代碼
.dib-block { display:inline; zoom:1; }

首先讓 block 元素轉化爲 inline 元素，強制其不換行；而後經過 zoom:1 觸發 hasLayout，使其能夠設置寬高。修復後的 截圖以下：



3）結合現代瀏覽器

綜上，現代瀏覽器都支持 display:inline-block ，IE六、7 inline 元素也能夠達到一樣的效果，IE六、7 block 元素須要設置 display:inline; zoom:1; 它們結合在一塊兒即是：

代碼以下	複製代碼
display:inline-block; /* 現代瀏覽器 +IE六、7 inline 元素 */ *display:inline; /* IE六、7 block 元素 */ *zoom:1;

爲了避免讓支持 CSS2.1 inline-block 的瀏覽器 重置爲 inline，咱們針對 IE六、7 作一個 hack。因爲現代瀏覽器也開始支持 zoom 屬性，這裏只是但願 IE六、7 中生效，因此仍是 hack 一下比較合適。至此產生了咱們熟悉的兼容各個瀏覽器的 inline-block 寫法。

小結：IE六、7 並非不支持 inline-block，只是 block 元素須要作一些處理來達到 inline-block 的效果。

2. 到底什麼是 inline-block
說了不少，或許不少朋友還不是太明白到底什麼是 inline-block？W3C 在 CSS2.1 The ‘display’ property 中描述以下：

This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

大體意思就是：inline-block 後的元素建立了一個行級的塊容器，該元素內部（內容）被格式化成一個塊元素，同時元素自己則被格式化成一個行內元素。

直白一點的意思就是：inline-block 的元素既具備 block 元素能夠設置寬高的特性，同時又具備 inline 元素默認不換行的特性。固然不只僅是這些特性，好比 inline-block 元素也能夠設置 vertical-align 屬性。簡而言之：

inline-block 後的元素就是一個格式化爲行內元素的塊容器( Block container )

總結：在ie67下的塊元素display:inline-block會失效，須要經過*display:inline;*zoom:1作hack處理