inline-block在ie6中的经典bug

众所周知,给元素设置 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;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{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>

  

原文地址:https://www.cnblogs.com/ayseeing/p/4420550.html