Yesterday someone asked Width absorbing HTML elements. I presented two solutions: one table-based and one pure CSS. Now the pure CSS one works well in Firefox and Chrome but not in IE.
昨天有人要求吸收HTML元素的宽度。我提出了两种解决方案:基于表的和纯CSS的。现在纯CSS在Firefox和Chrome上运行得很好，但在IE上就不行了。
Basically the floats are being bumped down to the next line. It is my understanding (and the behaviour of FF and Chrome) that this should not be the case because the left divs are block level elements that floats should basically ignore.
基本上，花车被撞到下一行。根据我的理解(以及FF和Chrome的行为)，这种情况不应该发生，因为左div是块级元素，浮动基本上应该忽略。
Complete code example is below. Adding a DOCTYPE to force IE into standards compliant mode helps slightly but the problem remains.
完整的代码示例如下。添加一个DOCTYPE来强制IE进入标准兼容模式会有一点帮助，但问题仍然存在。
So my question is: am I mistaken about my understanding of floats or is this IE's problem?
所以我的问题是:我对浮点数的理解是错误的还是这是IE的问题?
More importantly, how do I get this to work in IE? It's been bugging the hell out of me.
更重要的是，我如何让它在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>
2 个解决方案
#1
7
The floats are being bumped to the next line because of the width: 270px on the rows. That happens in IE6/7 because of its broken float model. IE puts the float elements next to the colored row divs instead of overlaying them, but since their combined width is bigger than the width of the wrapper, the colored rows drop down to the next line.
由于行上的宽度为270px，浮动被移动到下一行。这发生在IE6/7中，因为它的浮点模型被破坏了。IE将浮动元素放在有颜色的行div旁边，而不是叠加它们，但是由于它们的组合宽度大于包装器的宽度，因此有颜色的行会向下到下一行。
If you really need that maximum width of 270 pixels for those colored bars, you can use max-width instead. That doesn't work in IE6, though, so if that's really critical you'll need a work-around for that.
如果您确实需要这些彩色条的最大宽度为270像素，您可以使用max-width来代替。但是，这在IE6中是行不通的，所以如果这真的很关键的话，你需要一个变通的办法。
#2
0
not sure why your trying to achieve it that way. but this works.
不知道你为什么要这么做。但这工作。
<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>
#1
7
The floats are being bumped to the next line because of the width: 270px on the rows. That happens in IE6/7 because of its broken float model. IE puts the float elements next to the colored row divs instead of overlaying them, but since their combined width is bigger than the width of the wrapper, the colored rows drop down to the next line.
由于行上的宽度为270px，浮动被移动到下一行。这发生在IE6/7中，因为它的浮点模型被破坏了。IE将浮动元素放在有颜色的行div旁边，而不是叠加它们，但是由于它们的组合宽度大于包装器的宽度，因此有颜色的行会向下到下一行。
If you really need that maximum width of 270 pixels for those colored bars, you can use max-width instead. That doesn't work in IE6, though, so if that's really critical you'll need a work-around for that.
如果您确实需要这些彩色条的最大宽度为270像素，您可以使用max-width来代替。但是，这在IE6中是行不通的，所以如果这真的很关键的话，你需要一个变通的办法。
#2
0
not sure why your trying to achieve it that way. but this works.
不知道你为什么要这么做。但这工作。
<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>