在 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>
Run Code Online (Sandbox Code Playgroud)
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: …
Run Code Online (Sandbox Code Playgroud)