IE7清除浮动问题 [英] IE7 Clear Float Issue
问题描述
您好，这是我使用IE7的问题的简化版本。基本上，清除的div（绿色）后面的div不会像预期的那样（在IE7中）。它的工作原理预期在Safari，FF等和IE8。
Hi this is a simplified version of an issue I'm having with IE7. Basically the divs following the cleared div (green) don't behave as expected (in IE7). It works as expected in Safari, FF etc and IE8.
有人对修正有任何建议。感谢任何帮助：）
Does anybody have any advice for a fix. Thanks for any help :)
<!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之间插入一个分隔符清除元素，这将清楚：两个，跨越1px的高度，占据整个宽度，然后margin-top：-1px on
A) insert a "divider" clear element between 3rd and 4th which will do clear:both, span a height of 1px, take up the entire width, and then margin-top:-1px on 4, 5, 6 so there's no vertical 1px gap in between.
B）使用inline-block而不是浮动，如下所示： http://jsfiddle.net/gLcNm/16/
B) use inline-block instead of floats, like this: http://jsfiddle.net/gLcNm/16/
这需要标记更改，因此在您的框div之间没有空格，并且一个css hack的IE本来doinline-block没有重新声明内联的块级别。
This requires markup change so there are no whitespace between your box divs, AND a css hack for IE which doesnt natively do inline-block without redeclaring inline for block levels.
C）make每个框div都包含在一个rowdiv：
C) make each of those box divs be contained by a "row" div:
<div class="row">
<box><box><box>
</div>
然后清除 row 包含框。
这篇关于IE7清除浮动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
