Native IE8 - 如果它们的父元素是第一个浮动项目，为什么这些“内联块”元素不“换行”？

Question

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

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

条件： .box 必须浮动。

问题： first .box 元素内的内联块元素将有它的文本 not 换行（它会溢出容器）。任何其他 .box 元素内的内联块元素将按预期进行文本换行。

修复：这可以通过移除 .box 的浮动或通过对 .inline-block 元素应用边框（可以是透明的）来修复，这表明这是一个 hasLayout 错误（尽管zoom: 1 没有修复它）。但是我以为display: inline-block没有hasLayout这个bug？

那么为什么会发生这个问题，为什么只有第一个孩子？！？

由于 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

在.inline-block类中使用display: 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;
}