IE7与FF浮动问题

下面的代码将呈现不同的方式在IE7和FF3（NEW CODE张贴OLD CODE是误导 - 混乱对不起）IE7与FF浮动问题

 <!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的“下方”（尽管它在左侧）。

来源

2009-10-14 user190110

我调整了一下你的原始示例，下面的代码在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中都有。

来源

2009-10-14 20:00:33 Chuck

我想要完成的是FF在我的原始示例中呈现的内容，即左侧的div开始于与第一个“正确”div相同的高度。这个解决方案似乎让div在左边的下面。 – user190110 2009-10-14 20:04:22

更新的代码。我还从元素中移动了包装样式，并为右边的方块创建了一个类，因为它们都是相同的。无需2班保持。我还将左边的方框移到列表中的第一位。 – Chuck 2009-10-14 20:38:15

感谢这工作。 – user190110 2009-10-14 20:41:41

从FF 3.5开始，他们开始使用与其他更现代的浏览器（IE8，Safari，Chrome）相同的盒式模型渲染。 IE7正在使用较早的过时型号。您可能需要专门针对IE7使用CSS hack。一个常见的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 ONLY：

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

来源

2009-10-14 19:42:43

由于IE 7并不确定，而其他现代元素的宽度时，包括填充浏览器为你做的唯一选择是使用IE 7只width:560px

来源

2009-10-14 19:47:17 halocursed

对不起，我原来的问题与填充/框模型无关，但左边的div如何定位 - IE的垂直低于FF。请参阅有问题的更新代码。 – user190110 2009-10-14 19:57:21

破解而不是做任何黑客，尝试<html>标记之前添加此文档的开头：

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

没有文档类型声明，IE7进入quirksmode和填充工作方式与Firefox不同。

维基百科（在怪异模式IE7就像IE5在这方面）：

当宽度或高度为任何块级元素显式指定，它应确定可见元素的唯一的宽度或高度，随后填充边界和边距。 Internet Explorer 5包含指定宽度或高度内的内容，填充和边框;这会导致一个盒子的缩小或缩短。

来源

2009-10-14 19:53:01

试过，没有运气 - 请参阅更新的问题，以更清楚地了解问题是什么（我的第一套代码令人困惑）。 – user190110 2009-10-14 19:58:06

IE7与FF浮动问题

回答

相关问题