這篇文章所講的也是非常使用的技術(shù)，其中牽涉到其他的技術(shù)，也需要大家有所了解。正好這兩天也在看這方面的資料，提供一些資料給大家參考。
啊，inline-block，挺難琢磨并且迷人的聲明上承諾了很多，其實(shí)提供了很少。很多次我拿到類似這樣的 PSD 文件：

就哭了。
一般說(shuō)來(lái)，這種類型的布局是小菜一樁。固定寬度，固定高度，向左浮動(dòng)就解決了。但是，這個(gè)設(shè)計(jì)中內(nèi)容的多少是可變的，這就意味著如果這些塊中的一些內(nèi)容比其他的多，就會(huì)破.壞這個(gè)布局。

因?yàn)榈谝粋€(gè)展示項(xiàng)比其他項(xiàng)高，第五個(gè)項(xiàng)目就相對(duì)第一個(gè)浮動(dòng)，而不是位于它下面了?；旧衔覀兿胍粋€(gè)彈性表格的布局，但是適當(dāng)?shù)?，語(yǔ)義標(biāo)記。
我們以一個(gè)無(wú)序列表開(kāi)始這個(gè)簡(jiǎn)單的頁(yè)面，并把 display 設(shè)置為 inline-block:
<ul> <li> <h4>This is awesome</h4> <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/> </li> ... <ul>
<style> li { width: 200px; min-height: 250px; border: 1px solid #000; display: inline-block; margin: 5px; } </style>
效果在 Firefox 3， Safari 3 和 opera 中看起來(lái)沒(méi)問(wèn)題：

顯然，在垂直排列上有些錯(cuò)誤。嗯，也不算錯(cuò)誤吧，這是正確的表現(xiàn)，只不過(guò)不是我們想要的效果。
這是因?yàn)槊總€(gè) <li> 元素的基線是和其父元素 <ul> 的基線對(duì)齊排列的。你要問(wèn)啥是基線？一圖頂千言那：

基線就是橫貫上面文本的黑線。盡量說(shuō)的簡(jiǎn)單點(diǎn)。inline 或者 inline-block 元素默認(rèn)的 vertical-align 值 就是基線。也就是說(shuō)元素基線要和她父元素的基線對(duì)齊。下面有一個(gè)示例：

就如所看到的，每個(gè)基線都是和文本 ‘This is the baseline.’ 的基線對(duì)齊的。文本雖然不在 <li> 內(nèi)部，但是文本節(jié)點(diǎn)的父元素 <ul> 就指出了父元素的基線所在。
總之，修正方法是很簡(jiǎn)單的： vertical-align: top，這樣就能得到一個(gè)看起來(lái)不錯(cuò)阿網(wǎng)格：

但是在 Firefox 2, IE 6 和 7 中，依然無(wú)效：

從 Firefox 2 入手。
Firefox 2 不支持 inline-block，但是它支持 Mozilla 特有的顯示屬性 ‘-moz-inline-stack’，這個(gè)屬性和 inline-block 比較像。把它加在 display: inline-block 之前，F(xiàn)F2 會(huì)忽略 inline-block 而保留 -moz-inline-stack，因?yàn)樗徽J(rèn)識(shí) inline-block。支持 inline-block 的瀏覽器會(huì)使用 inline-block 而忽略之前的顯示屬性。
li { width: 200px; min-height: 250px; border: 1px solid #000; display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; }
不幸的是，有點(diǎn)小.bug：

坦白地說(shuō)，我不知道什么導(dǎo)致了這個(gè) bug。但是有個(gè)快速的修正方法。把 <li> 中所有的東西用 <div> 包含起來(lái)。
<li> <div> <h4>This is awesome</h4> <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/> </div> </li>
貌似 <li> 中的內(nèi)容被’重置’并且正確顯示了。

現(xiàn)在，轉(zhuǎn)到 IE 7 上來(lái)。IE 7 也不支持 inline-block，但是我們可以欺騙它以使 <li> 好像是 inline-block 的。怎么做呢？hasLayout，IE 的一個(gè)帶來(lái)樂(lè)趣的神奇屬性。你無(wú)法在一個(gè)元素上用 hasLayout: true; 顯示地設(shè)置 hasLayout，或通過(guò)其他類似的簡(jiǎn)單方法，但是可以用其他類似 zoom:1 的聲明來(lái)激發(fā)它。
技術(shù)上來(lái)說(shuō)，hasLayout 意味著，一個(gè) hasLayout 設(shè)為 true 的元素負(fù)責(zé)渲染它自己及其子元素(把它和 min-height 和 width 聯(lián)合起來(lái)，就得到了和 display:block 非常相似的效果)。這有點(diǎn)像神奇的精靈粉，把它灑在渲染問(wèn)題上，問(wèn)題就消失了。
當(dāng)我們給 <li> 加上 zoom:1 和 *display:inline(區(qū)分 IE6 和 IE7 的星號(hào) hack) 之后，在 IE7 中它們就可以像 inline-block 一樣顯示了：
li { width: 200px; min-height: 250px; border: 1px solid #000; display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; zoom: 1; *display: inline; }

哇！差不多了，只剩 IE 6 了：

IE6 不支持 min-height，但是多虧它對(duì) height 屬性的不正確處理，我們可以用它來(lái)代替。把 _height(IE6 下劃線 hack) 設(shè)為 250px 使所有的 <li> 元素高度為 250px，并且如果它們的內(nèi)容大于 250px，他們會(huì)擴(kuò)大來(lái)適應(yīng)。其他所有的瀏覽器會(huì)忽略 _height。
現(xiàn)在為止，對(duì)所有的瀏覽器都有效了，這是最終的 CSS 和 HTML：
<style> li { width: 200px; min-height: 250px; border: 1px solid #000; display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; zoom: 1; *display: inline; _height: 250px; } </style>
<li> <div> <h4>This is awesome</h4> <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/> </div> </li>
這篇文章所講的也是非常使用的技術(shù)，其中牽涉到其他的技術(shù)，也需要大家有所了解。正好這兩天也在看這方面的資料，提供一些資料給大家參考。

最新評(píng)論