包含 IE 中条目的图像下不需要的空白答案

【问题标题】：Unwanted white space under image containing entry in IE包含 IE 中条目的图像下不需要的空白
【发布时间】：2015-11-16 04:36:14
【问题描述】：

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

【问题讨论】：

你能显示 html 代码，至少带有 img-tag 和周围的标签吗？（以及那些周围标签的相关css）
提取了相关的 HTML 和 CSS！谢谢@MartenKoetsier
从flex的使用来看，我假设你的目标是IE11？如果不是，则之前的 IE 不支持 flex-layout（本机）。更重要的是：img 有一些 WordPress 类。据我所知，这些定义了各种 css 属性，具体取决于您使用的主题。如果没有确切地了解正在发生的事情，就不可能说出出了什么问题。您最好的做法是使用IE Developer Toolbar 并找出发生了什么。首先，关注空白属于哪个元素，然后是哪个类导致它。
我在 ie 11 中遇到了类似的问题，但没有任何技巧奏效。我的 .content 有 flex-direction: column 并将其更改为 flex-direction: row 修复它

标签： css image internet-explorer

【解决方案1】：

尝试将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 开心。

干杯！

【讨论】：

天才！谢谢！