gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 11:06:54 24 4
gpt4 key购买 nike

在 IE 中包含条目的图像下有不需要的空白我知道这是 HitTest 门的问题之一,已经回答了很多次。我真的尝试了所有我能找到的技巧,但没有任何帮助。图像的高度越大,空白就越大。如果图片高度为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;
}
  1. 我试过下面的 CSS

    img {
    float: left;
    vertical-align: bottom;/*or text-bottom or top or middle*/
    font-size: 0px;
    line-height: 1; /*or 0*/}

最佳答案

尝试将 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 满意。

干杯!

关于css - 图像下不需要的空白区域包含 IE 中的条目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32153758/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com