Internet explorer 和 floats：请解释一下答案

【问题标题】：Internet explorer and floats: please explainInternet explorer 和 floats：请解释一下
【发布时间】：2010-10-24 01:43:52
【问题描述】：

昨天有人问Width absorbing HTML elements。我介绍了two solutions：一个基于表格和一个纯 CSS。现在纯 CSS 在 Firefox 和 Chrome 中运行良好，但在 IE 中不行。

基本上，浮动被撞到下一行。我的理解（以及 FF 和 Chrome 的行为）不应该是这种情况，因为左 div 是块级元素，浮动基本上应该忽略。

完整的代码示例如下。添加 DOCTYPE 以强制 IE 进入标准兼容模式略有帮助，但问题仍然存在。

所以我的问题是：我对浮点数的理解有误还是这个 IE 的问题？

更重要的是，我如何让它在 IE 中工作？真是烦死我了。

<html>
<head>
<style type="text/css">
div div { height: 1.3em; }
#wrapper { width: 300px; overflow: hidden; }
div.text { float: right; white-space: nowrap; clear: both; background: white; padding-left: 12px; text-align: left; }
#row1, #row2, #row3, #row4, #row5, #row6 { width: 270px; margin-bottom: 4px; }
#row1 { background: red; }
#row2 { background: blue; }
#row3 { background: green; }
#row4 { background: yellow; }
#row5 { background: pink; }
#row6 { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
  $(function() {
    $("div.text").animate({ width: "90%" }, 2000);
  });
});
</script>
</head>
<body>
<div id="wrapper">
<div class="text">FOO</div><div id="row1"></div>
<div class="text">BAR</div><div id="row2"></div>
<div class="text">THESE PRETZELS ARE</div><div id="row3"></div>
<div class="text">MAKING ME THIRSTY</div><div id="row4"></div>
<div class="text">BLAH</div><div id="row5"></div>
<div class="text">BLAH</div><div id="row6"></div>
</div>
</body>
</html>

【问题讨论】：

这仅限于 1 个 IE 版本吗？
在 IE8 和带有 IE7 渲染引擎的 iirc IE8 上肯定会发生这种情况。
如果你让包装更宽会发生什么？
在 IE8 中使用文档类型为我工作。看起来像一个IE7错误。您可以将
放在
中，但这只是在回避问题......

标签： html css internet-explorer cross-browser

【解决方案1】：

由于行上的width: 270px，浮点数被撞到下一行。这发生在 IE6/7 中，因为它的 broken float model。 IE 将浮动元素放在彩色行 div 旁边而不是覆盖它们，但由于它们的组合宽度大于包装器的宽度，因此彩色行会下降到下一行。

如果您确实需要这些彩色条的最大宽度为 270 像素，则可以改用 max-width。但是，这在 IE6 中不起作用，所以如果这真的很关键，您需要一个解决方法。

【讨论】：

它们不应该是，因为它们是块级元素（即不是内联的）。其他所有浏览器都是这样做的。
确实...但 IE 并不是所有其他浏览器。我已经澄清了我的答案。

【解决方案2】：

不知道您为什么要以这种方式实现它。但这行得通。

<html>
<head>
<style type="text/css">
div div { height: 1.3em; }
#wrapper { width: 300px; overflow: hidden; }
div.text { float: right; white-space: nowrap; clear: both; background: white; padding-left: 12px; text-align: left; }
#row1, #row2, #row3, #row4, #row5, #row6 { width: 270px; margin-bottom: 4px; }
#row1 { background: red; }
#row2 { background: blue; }
#row3 { background: green; }
#row4 { background: yellow; }
#row5 { background: pink; }
#row6 { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
  $(function() {
    $("div.text").animate({ width: "90%" }, 2000);
  });
});
</script>
</head>
<body>
<div id="wrapper">
<div id="row1"><div class="text">FOO</div></div>
<div id="row2"><div class="text">BAR</div></div>
<div id="row3"><div class="text">THESE PRETZELS ARE</div></div>
<div id="row4"><div class="text">MAKING ME THIRSTY</div></div>
<div id="row5"><div class="text">BLAH</div></div>
<div id="row6"><div class="text">BLAH</div></div>
</div>
</body>
</html>

【讨论】：