我有一个简单的例子: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>
答案 0 :(得分:1)
设置显式宽度会使文本按预期运行:
.slide {
width: 629px;
}
答案 1 :(得分:0)
将其放入<head></head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
它可能解决了这个问题。