Question

以下代码在IE7和FF3中的呈现方式不同（新代码发布旧代码错误 - 抱歉混淆）

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
#boxr1{
background-color:#FFFFFF;
border:3px solid #DDDDCA;
float:right;
width:420px;

}

#boxr2{

background-color:#FFFFFF;
border:3px solid #DDDDCA;
float:right;
width:420px;

}

#boxleft{
border:3px solid #DDDDCA;
color:#277491;
width:300px;
}

</style>
</head>
<body>
<div style="width:800px">
    <div id="boxr1">test<br/>test<br/></div>

    <div id="boxr2">test2<br/>test2<br/></div>

    <div id="boxleft">leftdiv</div> 
</div>
<div style="clear:both;"></div>
</body>
</html>

我似乎无法弄清楚造成这种差异的原因。我希望它的行为与FF的行为（当然）。任何指导表示赞赏。我看到的差异是，在FF中，左侧div从页面顶部开始，而在IE中，它在“低于”其他div的位置（尽管它在左侧）。

Answer 1

从FF 3.5开始，他们开始使用与其他更现代的浏览器（IE8，Safari，Chrome）相同的盒子模型渲染。 IE7正在使用早期过时的模型。您可能需要使用CSS hack专门针对IE7。一个常见的IE7黑客是*：first-child + html hack。

*:first-child+html <your class or id>
{
    margin: ...
}

这将仅针对IE7。如果您想要定位FF 3+，可以使用：

html>/**/body <your class or id>
{
    margin: ...
}

仅适用于FF 3.5：

body:nth-of-type(1) <your class or id>
{
    margin: ...
}

Answer 2

由于IE 7在决定元素宽度时不包含填充，而其他现代浏览器唯一的选择是使用IE 7仅使用width:560px

Answer 3

尝试在<html>标记之前将其添加到文档的开头，而不是做任何黑客攻击：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果没有doctype声明，IE7会进入quirksmode，填充的工作方式与Firefox不同。

来自维基百科（在quirksmode中，IE7在这方面就像IE5一样）：

当为任何块级元素明确指定宽度或高度时，它应仅确定可见元素的宽度或高度，之后应用填充，边框和边距。 Internet Explorer 5包含指定宽度或高度内的内容，填充和边框;这会导致框的渲染更窄或更短。

Answer 4

我稍微调整了您的原始示例，下面的代码在IE，FF，Chrome和Opera中看起来相同。

     <html>
<head>
<style>

#wrapper{
    width: 923px;
    vertical-align: top;
}

.boxRight{
background-color:#FFFFFF;
border:3px solid #DDDDCA;
float:right;
margin:3px 0;
width:560px;

}

#boxleft{

color:#277491;
width:357px;
float: left;

}

</style>
</head>
<body>
<div id="wrapper">   
    <div id="boxleft">leftdiv</div>
    <div id="boxr1" class="boxRight">test<br/>test<br/></div>
    <div id="boxr2" class="boxRight">test2<br/>test2<br/></div>    
</div>
<div style="clear:both;"></div>
</body>
</html>

修改我在您编辑原始帖子后更新了我的代码。以上工作在FF，Chrome，IE，Opera。

IE7与FF浮动问题

4 个答案: