IE6/7下不同的inline-block

今天看了stupig博客的博文才知道原来IE6/7对内联元素和块元素的inline-block的解析是不同。如下图：

上面是span的inline-block效果，下面是div的inline-block效果。可以看出div(块元素)用inline-block IE6/7会把它解析成block来对待。

下面是我的测试代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE6/7下不同的inline-block</title>
<style>
.c{
    width:120px;
    height:100px;
    padding:5px;
    background-color:#00f;
    border-bottom:1px solid #000;
    display:inline-block;
}
</style>
</head>
<body>
<span class="c">
span的inline-block
</span>inline-block
<div class="c">
div的inline-block
</div>inline-block
</body>
</html>

那如果我们真的需要div(块元素)实现inline-block要怎么办呢？其实只需要在样式上加两句代码就好了。

.c{
    width:120px;
    height:100px;
    padding:5px;
    background-color:#00f;
    border-bottom:1px solid #000;
    display:inline-block;
    *display:inline;
    zoom:1;
}

Demo下载：http://pan.baidu.com/share/link?shareid=102979&uk=3221702211

posted @ 2012-11-03 19:51  前端小尚  阅读(184)  评论(0)    收藏  举报