html - native IE8 - 为什么这些 'inline-block' 元素不是 'wrap words' 如果它们的父项是第一个 float 元素？

Question

提前抱歉，这又长又奇怪。 我在使用 Bootstrap 时在 native IE8 中发现了这个错误，并一直将其剥离以找到原因。但我想知道为什么会发生这种情况。

设置:我有一个 .container , 在容器内我有一个 .box (本质上是另一个容器)在那个盒子里面我有一个 <div>元素 display: inline-block .

条件: .box 必须 float 。

问题 first 内的内联 block 元素 .box元素将其文本不 换行(它会溢出容器)。位于任何其他 .box 内的内联 block 元素元素将按预期进行文本换行。

修复:这可以通过删除 .box 的 float 来解决。或者给 .inline-block 添加边框元素(可以是透明的)，表明这是一个 hasLayout 错误(尽管 zoom: 1 没有修复它)。但我想display: inline-block没有 hasLayout 错误？

那么为什么会出现这个问题，为什么只有第一个 child ？!？

我已将演示代码放在我的服务器上，因为 JSBin 不能在 IE8 上运行，很抱歉链接关闭了。

HERE'S THE DEMO

演示 HTML

<div class="container">
    <h2>A container (red) with 1 box child (blue) which has 1 inline-block child (green background - border will fix issue)</h2>
    <div class="box">
        <div class="inline-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</div>
    </div>
</div>
<div class="container">
    <h2>A container (red) with 2 box children (blue) which each have 1 inline-block child (green background - border will fix issue)</h2>
    <div class="box">
        <div class="inline-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</div>
    </div>
    <div class="box">
        <div class="inline-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</div>
        </div>
    </div>
</div>

演示 CSS

*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body {
    margin: 0;
}
.container {
    width: 800px;
    margin: 10px auto;
    padding: 10px;
    border: 1px solid red;
}

/* Clear the float */
.container:before,
.container:after {
    content: " ";
    display: table;
}
.container:after {
    clear: both;
}

.box {
    float: left; /* THIS IS THE TRIGGER (without float it works) */
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid blue;
}

.inline-block {
    display: inline-block;
    background: #c4df9b;
    /*border: 1px solid green;*/  /* Having a border fixes it (when there's a float) */
}

.inline-block + .inline-block {
    background: #9db678;
}

大局!

Answer 1

使用 display: inline-block; 有什么具体原因吗？在类里面.inline-block

我使用了你所有的代码，这里是 Demo 。检查 IE7 和 IE8 工作。

.block {
    display: block; /*I remove the inline*/
    background: #c4df9b;
  -ms-word-break: break-all;
     word-break: break-all;
     word-break: break-word;
    /*border: 1px solid green;*/  /* Having a border fixes it (when there's a float) */
}

.block + .block {
    background: #9db678;
}