Question

嗨，这是我在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>

Answer 1

你可以......

A）在第3和第4之间插入一个“分隔符”清除元素，它将清除：两者，跨越1px的高度，占据整个宽度，然后是margin-top：-1px on 4,5,6 so它们之间没有垂直的1px间隙。

B）使用内联块而不是浮点数，如下所示：http://jsfiddle.net/gLcNm/16/

这需要更改标记，因此在你的盒子div之间没有空格，并且IE的css hack本身没有内联块而没有重新声明内联块级别。

C）使每个盒子div被“row”div包含：

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

然后将row清除，以便它包含方框。

IE7 Clear Float问题

1 个答案: