网络编程
位置:首页>> 网络编程>> 网页设计>> 跨浏览器的inline-block[译](3)

跨浏览器的inline-block[译](3)

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

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

从 Firefox 2 入手。

Firefox 2 不支持 inline-block,但是它支持 Mozilla 特有的显示属性 ‘-moz-inline-stack’,这个属性和 inline-block 比较像。把它加在 display: inline-block 之前,FF2 会忽略 inline-block 而保留 -moz-inline-stack,因为它不认识 inline-block。支持 inline-block 的浏览器会使用 inline-block 而忽略之前的显示属性。

li {
    width: 200px;
    min-height: 250px;
    border: 1px solid #000;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
}

不幸的是,有点小bug:

坦白地说,我不知道什么导致了这个 bug。但是有个快速的修正方法。把 <li> 中所有的东西用 <div> 包含起来。

<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>

貌似 <li> 中的内容被’重置’并且正确显示了。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com