简单的测试了一下,在IE6,7中,
1、如果元素是block,设置display为inline-block时,不生效;
2、如果元素是inline,设置display为inline-block时,生效;
3、兼容IE6,7的方法是*display:inline; *zoom:1;
4、inline元素在代码排版中要一行显示,不然相互之间会有小空格。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display:inline-block</title>
<style type="text/css">
div{ background:#EEE; margin:20px 0;}
.div-inline-block{ display:inline-block; width:100px; height:100px; background:#090; margin:5px; color:#fff; word-wrap:break-word;}
.span-inline-block{ display:inline-block; width:100px; height:100px; background:#090; margin:5px; color:#fff; word-wrap:break-word;}
.compatible-inline-block{display:inline-block; width:100px; height:100px; background:#090; margin:5px; color:#fff; *display:inline; *zoom:1; word-wrap:break-word;}
</style>
</head>
<body>
div.inline-block
<div>
<div class="div-inline-block">div.inline-block</div><div class="div-inline-block">div.inline-block</div><div class="div-inline-block">div.inline-block</div>
</div>
span.inline-block
<div>
<span class="span-inline-block">span-inline-block</span><span class="span-inline-block">span-inline-block</span><span class="span-inline-block">span-inline-block</span>
</div>
div.compatible-inline-bloc
<div>
<div class="compatible-inline-block">div.inline-block</div><div class="compatible-inline-block">div.inline-block</div><div class="compatible-inline-block">div.inline-block</div>
</div>
</body>
</html>