html - Internet Explorer 8 - float 、图像、div

Question

在使用 Internet Explorer 8 时尝试查看我的元素时出现问题(怎么办？)

问题是图像和跨度，可以是内联的也可以是 float 的 block ，总是一个在另一个下面，或者是文本的一部分。

我的示例代码是:

HTML

<div>
    <div class="text-left">
        <img src="my_image_path.png"><span>Some text at it's side</span>
    </div>
    <div class="text-right">
        <span>Text to the right</span>
    </div>
</div>

CSS:

.text-left {
    float: left;
}
.text-left img {
    margin-right: 10px;
}
.text-right {
    float: right;
}

上面的代码在 IE9、Safari、Chrome、Firefox 中完美运行……但在 IE8 中却不行。图像放置得很好，但跨度不会停留在一行中(不是很长的文本)。如上所述，我已经尝试过同时使用 block 和 float ，但也没有用。 div 容器的宽度为 auto。

编辑:我自己发现的解决它的唯一方法，并且不是很自豪，它是将最小宽度添加到图像和跨度的 div 容器。希望它是另一种更准确的方式。

编辑 2:我在这里向您展示 IE8 和 Chrome 中的结果。

在 IE8 中的结果:

Chrome 中的结果(良好):

Answer 1

尝试

.text-left > span { white-space: nowrap; }

不是很漂亮，但比处理 min-width 更好。