带有调整图像大小的浮动文本在 IE8 中失败答案

【问题标题】：Floated text with resizing image fails in IE8带有调整图像大小的浮动文本在 IE8 中失败
【发布时间】：2013-05-24 19:14:42
【问题描述】：

我有一个 img 和 p 在 div 中彼此相邻浮动的以下简单示例。如果您取消注释 CSS 的最后一点，文本会下降到图像下方并停留在那里 - 但仅限于 IE8 标准模式。如何让图像在 IE8 中调整大小而不会产生这种不幸的副作用？

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
.slide {
    border-style: solid;
    border-color: #DDDDDD;
    border-width: 7px;

    display: inline-block;
    zoom: 1;
    *display: inline;
}

.slide img {
    border-right-style: solid;
    border-color: #DDDDDD;
    border-width: 7px;

    float: left;
}

.slide .caption {
    width: 230px;
    float: left;
    padding: 10px 10px 10px 20px;
}

/* Here's the issue. */
/*.slide img, .slide, .slide_wrapper {
    max-width: 100%;
    height: auto;
}*/
    </style>
</head>
<body>
    <div class="slide_wrapper">
        <div class="slide">
            <img src="http://placehold.it/362x250" />
            <p class="caption">
            test2
                </p>
        </div>
    </div>
</body>
</html>

【问题讨论】：

该问题在标签中有兼容模式。我可以澄清一下：您正在使用哪个 IE 版本，以及您正在使用什么模式进行测试？如果您使用 IE 的兼容模式来测试旧版本的 IE，请注意，兼容模式并不是真正的“兼容”；它有一些已知的错误和怪癖，使其与真实事物不同；与 IE9 的 IE8 模式相比，在 IE8 的真实副本中进行测试会更好。
@Spudley：我在 IE9 中使用 IE8 浏览器模式和 IE8 标准文档模式。但是，我刚刚将此示例移至具有 IE8 的服务器上，您是对的 - 那里不同（文本浮动在图像旁边）。
@Spudley：发现了不同；我在 IE9 中显式设置模式，而我的示例是在 IE8 中以 Quirks 模式加载。我添加了DOCTYPE 声明，现在它在实际的 IE8 中看起来是一样的。
啊，好旧的怪癖模式。地球之灾。很高兴你找到它。
@Spudley：谢谢。现在样本是正确的，我需要正确显示。 :)

标签： css internet-explorer-8 ie8-compatibility-mode ie8-browser-mode

【解决方案1】：

设置显式宽度使文本按预期运行：

.slide {
    width: 629px;
}

【讨论】：

【解决方案2】：

把这个放在你的<head></head>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

它可能会解决问题。

【讨论】：

哇，如果我在测试之前取消注释有问题的 CSS，会很有帮助。这不起作用。
我没有投反对票；刚刚删除了赞成票。当我添加元标记时，我没有取消注释最后一点 CSS，这就是它看起来有效的原因。元标记对结果没有影响（文本仍在图像下方）。
啊，这就是原因。我不知道那会是什么问题。它可以在 IE9 中运行吗？
它在IE9和IE7中工作；这只是一个IE8问题。（可惜我必须支持IE7+..）
在问题CSS（最后一点）？不改变页面。