{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 迷人小祖宗 的问题《IE7 Clear Float Issue》','https://www.manongdao.com/q-446088.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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>
You can...
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) use inline-block instead of floats, like this: http://jsfiddle.net/gLcNm/16/
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 each of those box divs be contained by a "row" div:
Then make
rowclear so it'll contain the boxes.