位置：首页>> 网络编程>> 网页设计>> 跨浏览器的inline-block[译]（4）

跨浏览器的inline-block[译]（4）

作者：糖伴西红柿　来源：前端观察　发布时间：2009-03-11 21:04:00　

标签：布局,css,浏览器,inline-block

现在，转到 IE 7 上来。IE 7 也不支持 inline-block，但是我们可以欺骗它以使 <li> 好像是 inline-block 的。怎么做呢？hasLayout，IE 的一个带来乐趣的神奇属性。你无法在一个元素上用 hasLayout: true; 显示地设置 hasLayout，或通过其他类似的简单方法，但是可以用其他类似 zoom:1 的声明来激发它。

技术上来说，hasLayout 意味着，一个 hasLayout 设为 true 的元素负责渲染它自己及其子元素(把它和 min-height 和 width 联合起来，就得到了和 display:block 非常相似的效果)。这有点像神奇的精灵粉，把它洒在渲染问题上，问题就消失了。

当我们给 <li> 加上 zoom:1 和 *display:inline(区分 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) 设为 250px 使所有的 <li> 元素高度为 250px，并且如果它们的内容大于 250px，他们会扩大来适应。其他所有的浏览器会忽略 _height。

现在为止，对所有的浏览器都有效了，这是最终的 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="https://img.aspxhome.com/file/UploadPic/20093/11/3279671785_d1f2e665b6_s-29.jpg"
        alt="lobster" width="75" height="75"/>
    </div>
</li>

糖伴西红柿说：

这篇文章所讲的也是非常使用的技术，其中牵涉到其他的技术，也需要大家有所了解。正好糖伴西红柿这两天也在看这方面的资料，提供一些资料给大家参考。

原文地址: Cross-Browser Inline-Block

第一页上一页 1 2 3

投稿

跨浏览器的inline-block[译]（4）

猜你喜欢