3

我有以下简单示例，其中一个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>
4

2 回答 2

1

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

.slide {
    width: 629px;
}
于 2013-05-29T18:25:33.910 回答
0

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

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

它可能会解决问题。

于 2013-05-29T13:38:56.043 回答