原生IE8 - 为什么这些＆＃39; inline-block＆＃39;元素不包括单词＆＃39;如果他们的父母是第一个浮动项目？

Question

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

设置：我有一个.container，在容器内我有.box（本质上是另一个容器），在该框中我有一个<div>元素是display: inline-block。

条件： .box 必须浮动。

问题： 第一个 .box元素中的内联块元素将使其文本不包装（它将溢出容器）。任何其他.box元素内的内联块元素将按预期方式进行文本换行。

修正：可以修复此问题，既可以删除.box的浮点数，也可以将边框应用于.inline-block元素（可以是透明的），并建议＆＃ 39; sa hasLayout bug（虽然zoom: 1没有解决它）。但我认为display: inline-block没有hasLayout错误？

那么为什么会出现这个问题，为什么只有第一个孩子呢？！？

我已将演示代码放在我的服务器上，因为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;
}

BIG PICTURE！

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;
}