众所周知，给元素设置 inline-block ，可以让ie下的元素出发layout:1。
但是，当给元素设置 inline-block 后，在另外一个class 样式（非设置inline-block的class样式）重置为inline或者block。对于ie6下，该元素还会保留触发 layout:1;的效果。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
.box a{display:inline-block;width:30%;background:#ccc;text-align:center;}
.box .fl{float:left;background:red;}
.box .fr{float:right;background:red;}
.box .center{display:block;}
</style>
<div class="box">
<a href="#" class="fl">left</a>
<a href="#" class="fr">right</a>
<a href="#" class="center">center</a>
</div>
</body>
</html>
在ie6下面会发现中间的模块会和左右模块之间有间距，可以看到白色背景。
这个bug就是inline-block样式引起的，虽然后来在 .box .center 样式中重置为block，但是该模块还是保留了layout:1;的属性。
解决办法：
<style>
.box a{width:30%;background:#ccc;text-align:center;}
.box .fl{float:left;display:inline-block;background:red;}
.box .fr{float:right;display:inline-block;background:red;}
.box .center{display:block;}
</style>
时间： 2024-10-20 00:50:34