internet-explorer-8 - IE8。溢出隐藏 + 最小宽度 : is there a workaround to this strange behavior?

Question

如果我们 float 了 div A 和 div B，并在其旁边隐藏了 overflow: hidden - div B 应该占用 float 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;
}​

Answer 1

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