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問題

回答

相關問題