Setting an explicit width makes the text behave as expected:
.slide {
width: 629px;
}
문제
I have the following simple example of an img
and a p
floated next to each other in a div. If you uncomment the last bit of CSS, the text drops below the image and stays there - but only in IE8 Standards mode. How do I get the image to resize in IE8 without this unfortunate side effect?
<!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>
해결책
Setting an explicit width makes the text behave as expected:
.slide {
width: 629px;
}
다른 팁
Put this in your <head></head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
It probably fix the problem.