Hor*_*yun 3 css internet-explorer image
在 IE 中包含条目的图像下有不需要的空白我知道这是最热门的问题之一，并且已经回答了很多次。我真的尝试了我能找到的所有技巧，但没有任何帮助。图像的高度越大，空白区域就越大。如果图像高度为100px，则间隙约为200px。
HTML (Wordpress php)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div id="main">
<ul id="postlist">
<li class="entry">
<div class="content">
<h2>title</h2>
<img src="http://" alt="04" width="681" height="382" class="alignnone size-full wp-image-137">
</div>
</li>
</ul>
</div>
CSS
#main ul {
font-size: 1em;
line-height: 1.4em;
}
#main ul#postlist {
margin: 0;
overflow: hidden;
list-style: none
}
#main ul#postlist li {
overflow: visible;
display: flex;
margin: 0.875em 0.5em;
float: none;
font-size: 1em;
}
#main ul#postlist li .content {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
border: none;
border-top: 1px solid rgba(34, 36, 38, 0.1);
background: none;
margin: 0em;
padding: 1em 1.2em;
box-shadow: none;
font-size: 1em;
border-radius: 0em;
}
img {
display: block;
border: none;
max-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
我试过下面的CSS
img {
float: left;
vertical-align: bottom;/*or text-bottom or top or middle*/
font-size: 0px;
line-height: 1; /*or 0*/}
小智 5
尝试添加min-height: 1px;到#main ul#postlist li .content
如果这不起作用，请尝试使用flex: 1 0 auto;而不是 flex-grow 属性。
我们在使用 flex 在我们的网站上强制执行粘性页脚时遇到了同样的问题。当我们将引导程序的 col-xs-12 类添加到图像的容器时，我们注意到问题自行解决。在剔除其他 CSS 属性后，我们发现 col-xs-12 中我们需要的只是min-height:1px让 IE 满意的属性。
干杯!