Internet Explorer 8 - 浮动、图像、div

Question

使用 Internet Explorer 8 尝试查看项目时出现问题（怎么办？）

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

我的示例代码是：

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.

更好的选择

Answer 2

你需要 min-width 的原因是你还没有清除浮动。

使用 clearfix 或在浮动元素下方创建另一个元素并将其设置为 clear: both;

关于 clearfix 的更多信息：https://css-tricks.com/snippets/css/clear-fix/

Answer 3

针对 Internet Explorer 8 及更低版本的关键是在样式末尾附加“\9”。

.text-left img {
margin-right: 20px; //Whatever it takes to make it perfect}

这可能对您有所帮助。

Answer 4

昨天无意间知道了为什么会这样。

Bootstrap 自动将 CSS 属性 max-width: 100%; 添加到图像。我试图删除该属性，神奇的是上面的图像不再发生了。 IE8用一些属性做了一些很奇怪的东西。

基本上，您需要在需要时使用某种 class 删除所需图像的属性，例如 .no-max-width { max-width: none !important; }

希望这个回答能对遇到这个问题的人有所帮助。

Answer 5

您可以使用媒体对象。

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

Internet Explorer 8 - 浮动、图像、div

Internet Explorer 8 - Floats, images, divs

html

css

image

internet-explorer-8