IE9不能正确计算宽度与浮动元素

当我创建说一个div容器与说100px宽度和位置2个div元素一个浮动到左边，另一个到右边界2px和宽度46px每个它们应该绘制在同一行上并排覆盖父容器的整个宽度。这发生在Firefox和Chrome中，但IE9在单独的行中绘制它们，为了获得与其他浏览器相同的效果，我需要在父元素中指定102px的宽度。这是为什么？IE9不能正确计算宽度与浮动元素

下面的代码：

<html> 

<head> 

<style> 

div { 
margin:0; 
padding:0; 
} 

</style> 

</head> 

<body> 

<div style="border: 5px solid;width:100px;height:100px"> 

<div style='border:2px solid green;width:46px;height:46px;float:left'></div> 

<div style='border:2px solid 
green;width:46px;height:46px;float:right'></div> 
<div> 

</body> 

</html>

来源

2012-04-06 Bat0u89

添加一些代码，也许我们可以协助。通过你提到的，我可以告诉你，你的主div中的浮动元素溢出，这就是为什么你的div没有被包含。 – breezy 2012-04-06 18:26:41

我看不出两个56px宽度的div如何在100px div父级中并排浮动... – mddw 2012-04-06 19:33:25

对不起，修正了它... – Bat0u89 2012-04-07 19:10:19

好的我找到了解决问题的办法。

你必须做的是你必须添加DOCTYPE声明例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

它似乎并没有因为IE的盒模型错误http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug 作为将导致较小的元素此行为... 我真的很困惑...

来源

2012-04-07 19:15:32 Bat0u89

就个人而言，我宁愿使用display: inline-block比花车周围得多。

无论如何，问题最可能的原因是两个<div>元素之间的空白空格。它可能会改变第二个。尝试删除它（即，<div...>...</div><div...>...</div>）

来源

2012-04-07 11:48:04

所有的浮动块都是块元素，所以它们不受空白的影响，只要我尽管如此，我已经删除了所有空白，但仍然面临同样的问题... – Bat0u89 2012-04-07 12:01:06

IE9不能正确计算宽度与浮动元素

回答

相关问题