4

如果我们浮动了 div A，并且 div B 带有溢出：隐藏在它旁边 - div B 应该占据浮动 div 旁边的所有可用空间。如果我们在 div B 上设置了 min-width 并且窗口尺寸太小而无法将这两个 div 保持在同一行 - div B 应该包裹在 div A 下并占据父级的所有可用宽度。我们可以在除 IE8 之外的所有主要浏览器中看到这种确切的行为，甚至 IE7 也能按预期处理它。在 IE8 中，当窗口大小足够小时，div B 包裹在 div A 下 - div B 不占用所有可用宽度，而只有其最小宽度。问题是：这是错误还是标准行为？如果这是一个错误，我们如何解决它？

我在这里有一个测试用例：http: //jsfiddle.net/BJM4s/2/，调整窗口大小以查看它的运行情况。

HTML：

<div class="parent">
    <div class="A">
        <img src="http://placekitten.com/g/100/100  " />                                                     
    </div>
    <div class="B">
       float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float
     </div>
 </div>​

CSS：

.parent {
    overflow:hidden;
    margin: 20px;
    border: 1px solid;
}


.A {
    float:left;
    margin-right: 10px;
}
.B {
    overflow:hidden;
    min-width: 200px;
    background: lime;
}​
4

1 回答 1

1

似乎添加display: table-cellto.B 使它的行为。我没有在所有其他浏览器中进行全面测试，看看它是否会导致问题。最好只为 IE8 设置它（尽管它似乎不影响 IE7/9 或 Firefox）。

于 2012-12-05T23:36:52.433 回答