Question

如果我们已经浮动div A，并且div B有溢出：隐藏在它旁边 - div B应该占用浮动div旁边的所有可用空间。如果我们在div B上设置了最小宽度并且窗口大小太小而不能将这两个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;
}

Answer 1

似乎将display: table-cell添加到.B makes it behave。我没有在所有其他浏览器中完全测试，看它是否会导致问题。为IE8设置它可能是最好的（尽管它似乎不会影响IE7 / 9或Firefox）。

IE8。溢出隐藏+最小宽度：这种奇怪的行为有解决方法吗？

1 个答案: