IE9 无法使用浮动元素正确计算宽度答案

【问题标题】：IE9 doesn't compute width properly with floating elementsIE9 无法使用浮动元素正确计算宽度
【发布时间】：2012-04-20 07:18:46
【问题描述】：

当我创建一个宽度为 100 像素的 div 容器并放置 2 个 div 元素时，一个浮动到左侧，另一个浮动到右侧，边框为 2 像素，宽度为 46 像素，它们应该绘制在同一条线上并排覆盖父容器的整个宽度。这发生在 Firefox 和 Chrome 中，但 IE9 将它们绘制在不同的行上，为了与其他浏览器具有相同的效果，我需要在父元素中指定 102px 的宽度。这是为什么呢？

代码如下：

<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>

【问题讨论】：

添加一些代码，也许我们可以提供帮助。根据你提到的，我可以告诉你主 div 中的浮动元素溢出，这就是为什么你的 div 没有被包含。
我看不出两个 56px 宽度的 div 是如何在 100px div 父级中并排浮动的...

标签： css internet-explorer-9 width css-float

【解决方案1】：

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

你需要做的是你必须添加 Doctype 声明，例如：

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

好像不是因为ie盒子模型bughttp://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug 因为这种行为会导致更小的元素...... 我真的很困惑……

【讨论】：

【解决方案2】：

就我个人而言，我更愿意使用display: inline-block，而不是使用浮点数。

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

【讨论】：

所有浮点数都是块元素，因此据我所知它们不受空格的影响尽管如此我已经删除了所有空格但我仍然面临同样的问题...