IE8.溢出隐藏+最小宽度:这种奇怪的行为是否有解决方法



如果我们浮动了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;
}​

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

相关内容

最新更新