Question

我在IE6＆amp; ie7：

中有浮动问题

  <!DOCTYPE html>
    <html>
    <head>
    <title>lily</title>
    <style>
        div{width: 100px; height: 100px;}
        .div1{background: red; float: left;}
        .div2{background: yellow;}
    </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <div class="div2">div2</div>
    </body>
</html>

为什么它在IE6＆amp;＆amp; IE7和Chrome中显示不同？以及如何在ie6＆amp; ie7？

中解决它

：

Answer 1

   <!DOCTYPE html>
<html>
<head>
<title>lily</title>
<style>
    div{width: 100px; height: 100px;}
    .div1{background: red; float: left;}
    .div2{background: yellow; clear:both;}
</style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>

enter image description here

Answer 2

您的第二个div正在清除您的第一个，但只清除文本。如果你设置左边距，你可以告诉它坐在浮动div旁边。

http://jsfiddle.net/Pjvtb/

.div2 {
    margin-left: 100px; /* new line */
    background: yellow;
}

注意：由于div，IE 6和7错误地将第二个hasLayout移到第一个3px之后。您可以在线搜索有关与之相关问题的更多信息。在IE 6中还有一个margin-left: 103px“文本慢跑”（也可能是7，我记不清了）通常意味着，要在所有浏览器中显示相同内容，实际上会有{{1}}以适应IE的怪异。

Answer 3

首先，先尝试两个div浮动，看看会发生什么。

HERE是FIDDLE，每个方案都可供您测试。

 /* yours */
.yours div {
    width: 100px; 
    height: 100px;
}

.yours .div1 {
    background: red; 
    float: left;
}

.yours .div2 {
    background: yellow;
}


/* mine */
.mine div {
    width: 100px;
    height: 100px;
    float: left;
}

.mine .div1 {
    background: red;
}

.mine .div2 {
    background: yellow;
}


/* mine with a cleared float */
.mine-too div {
    width: 100px;
    height: 100px;
    float: left;
}

.mine-too .div1 {
    background: red;
}

.mine-too .div2 {
    background: yellow;
    clear: left;
    /* not BOTH - you only need left - there is no right... */
}

ie6＆amp; ie7中的css浮点问题

3 个答案: