Css IE7明确浮动问题_Css_Internet Explorer_Internet Explorer 7_Css Float

Css IE7明确浮动问题

css internet-explorer

Css IE7明确浮动问题,css,internet-explorer,internet-explorer-7,css-float,Css,Internet Explorer,Internet Explorer 7,Css Float,嗨，这是一个简化版本的问题，我与IE7。基本上，清除的div（绿色）后面的div的行为与预期不符（在IE7中）。它在Safari、FF等和IE8中正常工作有人有什么建议吗。谢谢你的帮助：） #包裹{宽度：600px；高度：1000px；背景：黑色；} .box{宽度：179px；高度：180px；浮动：左侧；边框右侧：1px纯白；边框顶部：1px纯白；右边距：20px；背景：蓝色；} .clear{clear:left；}.small{height:100px}.xsmall{height:

嗨，这是一个简化版本的问题，我与IE7。基本上，清除的div（绿色）后面的div的行为与预期不符（在IE7中）。它在Safari、FF等和IE8中正常工作

有人有什么建议吗。谢谢你的帮助：）


#包裹{宽度：600px；高度：1000px；背景：黑色；}
.box{宽度：179px；高度：180px；浮动：左侧；边框右侧：1px纯白；边框顶部：1px纯白；右边距：20px；背景：蓝色；}
.clear{clear:left；}.small{height:100px}.xsmall{height:50px}.first{background:red；}.second{background:yellow；}.third{background:pink；}
第四{背景：绿色；}。第五{背景：浅绿色；}

您可以

A）在第3个和第4个之间插入一个“分隔符”清除元素，这样可以清除：两个元素都跨越1px的高度，占据整个宽度，然后在4、5、6上留边距顶部：-1px，因此在这两个元素之间没有1px的垂直间隙

B）使用内联块而不是浮动，如下所示：

这需要改变标记，这样在框div之间就不会有空格，IE的css黑客在没有重新声明块级别的inline的情况下，不会在本地执行inline块

C）使每个框div包含在一个“行”div中：

然后清除

行

，这样它将包含方框。

meder:我看不出你的答案B（在方框中应用display:inline block而不是float:left）在这种情况下有什么帮助。JSFIDLE中的第四个框打断成新行，因为container元素太窄。如果我将其加宽，则方框仍保留在第一行：

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

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