中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

現(xiàn)在，轉(zhuǎn)到 IE 7 上來。IE 7 也不支持 inline-block，但是我們可以欺騙它以使 <li> 好像是 inline-block 的。怎么做呢？hasLayout，IE 的一個帶來樂趣的神奇屬性。你無法在一個元素上用 hasLayout: true; 顯示地設(shè)置 hasLayout，或通過其他類似的簡單方法，但是可以用其他類似 zoom:1 的聲明來激發(fā)它。

技術(shù)上來說，hasLayout 意味著，一個 hasLayout 設(shè)為 true 的元素負(fù)責(zé)渲染它自己及其子元素(把它和 min-height 和 width 聯(lián)合起來，就得到了和 display:block 非常相似的效果)。這有點像神奇的精靈粉，把它灑在渲染問題上，問題就消失了。

當(dāng)我們給 <li> 加上 zoom:1 和 *display:inline(區(qū)分 IE6 和 IE7 的星號 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，但是多虧它對 height 屬性的不正確處理，我們可以用它來代替。把 _height(IE6 下劃線 hack) 設(shè)為 250px 使所有的 <li> 元素高度為 250px，并且如果它們的內(nèi)容大于 250px，他們會擴(kuò)大來適應(yīng)。其他所有的瀏覽器會忽略 _height。

現(xiàn)在為止，對所有的瀏覽器都有效了，這是最終的 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ù)，也需要大家有所了解。正好糖伴西紅柿這兩天也在看這方面的資料，提供一些資料給大家參考。

原文地址: Cross-Browser Inline-Block
譯文地址：跨瀏覽器的 inline-block

經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2915054-1-1.html

本文鏈接：http://www.95time.cn/tech/web/2009/6497.asp　

出處：前端觀察
責(zé)任編輯：bluehearts

上一頁 跨瀏覽器的inline-block [3] 下一頁

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。