Question

在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*/}

Answer 1

尝试将min-height: 1px;添加到#main ul#postlist li .content

如果这不起作用，请尝试使用flex: 1 0 auto;代替flex-grow属性。

我们在使用flex在我们的网站上强制执行粘性页脚时遇到了同样的问题。我们注意到，当我们将bootstrap的col-xs-12类添加到图像容器时，问题就解决了。在清除了其他CSS属性之后，我们发现col-xs-12所需要的只是min-height:1px属性，以使IE感到高兴。

干杯！

IE中包含条目的图像下的不需要的空白区域

1 个答案: