IE7 Clear Float问题

嗨，这是我用IE7处理的一个简化版本。基本上，清除div（绿色）后的div不像预期的那样运行（在IE7中）。它在Safari，FF等和IE8中按预期工作。IE7 Clear Float问题

有没有人有任何修复建议。感谢您的帮助:)

<!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>

来源

2010-07-29 csbourne

你可以...

A）插入第3和第4，这将做明确的之间的“分水岭”清晰的元素：两者跨越1px的高度，占用整个宽度，然后margin-top：-1px在4,5,6，所以没有垂直的1px间隔。

B）使用inline-block的代替花车，像这样：http://jsfiddle.net/gLcNm/16/

这需要标记的变化所以有IE浏览器CSS破解其犯规本身做inline-block的没有你的盒子的div之间没有空格和重新宣布内联块级别。

C）使每个那些箱子的div由“行”的div包含：

<div class="row"> 
<box><box><box> 
</div>

然后让row清楚，所以它会包含框。

来源

2010-07-29 17:51:51

非常感谢我认为方法c最适合我。干杯 – csbourne 2010-07-29 20:03:01

meder：我看不出你的答案B（应用display：inline-block而不是float：left到盒子）在这种情况下有帮助。你的jsfiddle中的第四个盒子因为容器元素太窄而分裂成一个新的行。如果我把它放大，那么这个盒子仍然在第一行：http://jsfiddle.net/gLcNm/32/ – gvas 2012-09-06 12:44:52

IE7 Clear Float问题

回答

相关问题