0

当我创建一个宽度为 100px 的 div 容器并放置 2 个 div 元素时，一个向左浮动，另一个向右浮动，边框为 2px，宽度为 46px，它们应该并排绘制在同一行上覆盖父容器的整个宽度。这发生在 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>
4

2 回答 2

0

就个人而言，我宁愿使用花车也不愿使用display: inline-block花车。

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

于 2012-04-07T11:48:04.370 回答
0

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

你需要做的是你必须添加 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-07T19:15:32.573 回答