IE7 Clear Float Issue

2019-03-06 07:47发布

站内文章 / HTML/CSS
42 0 0

问题:

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>

回答1:

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:

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

Then make row clear so it'll contain the boxes.



标签： css internet-explorer internet-explorer-7 css-float
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~