IE6/Ie7 display:inline-block 不起作用

关注

原创最新推荐文章于 2026-04-07 16:49:42 发布 6.5k 阅读 AI 写同款· GEO 优化 ›

手把手教你用EGM96模型校正DEM数据（含在线工具推荐）本文详细介绍了如何使用EGM96地球重力场模型校正DEM数据中的高程偏差。通过对比WGS84椭球面与大地水准面的差异，解释了校正原理，并提供了从在线工具快速验证到Python脚本批量处理的全流程实战指南，帮助GIS开发者和数据分析师确保高程数据基准一致，提升空间分析精度。阅读详情

在IE6、IE7中不识别display:inline-block属性，但使用inline-block属性在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的分析也不难理解为什么IE6、IE7下对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然是行布局。IE8识别display:inline-block;

在IE6、IE7中实现块元素的inline-block效果有以下两种方法：

1先使用display:inline-block属性触发layout，然后再定义display:inline让块元素呈现内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典BUG)。

2直接将块元素设置为display:inline呈现为内联对象，然后触发layout(如zoom:1)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{text-align:center;}
.inlineBlock{width:100px;height:100px;border:1px solid #FF7900;margin:8px;display:inline-block;text-align:center;}
.inline{*display:inline;}
.layout{zoom:1;display:inline-block;}
</style>
</head>
<body>
<div class="inlineBlock inline">1</div>
<div class="inlineBlock inline">2</div>
<div class="inlineBlock inline">3</div>
</body>
</html>