您好，这是我在使用 IE7 时遇到的问题的简化版本。基本上，清除的 div（绿色）之后的 div 不会按预期运行（在 IE7 中）。它在 Safari、FF 等和 IE8 中按预期工作。
有人有任何修复建议吗？谢谢你的帮助 ：）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
#wrap {width:600px;height:1000px;background:black;}
.box {width:179px;height:180px; float:left; border-right:1px solid white;border-top:1px solid white;margin-right:20px;background:blue;}
.clear{clear:left;}.small{height:100px}.xsmall{height:50px}.first{background:red;}.second{background:yellow;}.third{background:pink;}
.fourth{background:green;}.fifth{background:aqua;}</style>
</head>
<body>
<div id="wrap">
<div class="box first"></div>
<div class="box small second"></div>
<div class="box xsmall third"></div>
<div class="box clear fourth "></div>
<div class="box fifth"></div>
<div class="box sixth"></div>
</div>
</body>
</html>
你可以...
A) 在第 3 个和第 4 个之间插入一个“分隔符”透明元素，该元素将执行clear:both，跨越 1px 的高度，占据整个宽度，然后在 4、5、6 上插入 margin-top:-1px，这样就没有垂直之间有 1px 间隙。
B) 使用 inline-block 而不是 float，如下所示：http://jsfiddle.net/gLcNm/16/ http://jsfiddle.net/gLcNm/16/
这需要标记更改，以便您的框 div 之间没有空格，并且需要针对 IE 进行 css hack，它本身不会执行内联块，而无需重新声明块级别的内联。
C) 使每个盒子 div 包含在“行”div 中：
<div class="row">
<box><box><box>
</div>
然后使row透明，所以它会包含盒子。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
