今天看了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{
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{
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