IE在浮动图像后添加大量空白答案

【问题标题】：IE adding mass amount of blank space after floated imagesIE在浮动图像后添加大量空白
【发布时间】：2015-05-12 17:39:13
【问题描述】：

我正在为客户对 shopify 主题进行一些自定义，并且我已经包含了一个简单的 sn-p，它只是一个由三个图像组成的网格，每个图像下方都有一个描述。每个图像/描述集的包含 div 是浮动的。

它在除 IE 之外的所有浏览器上都能完美呈现，IE 会在网格下方增加数百像素的空间。当我注释掉图像并留下其他所有内容时，空间消失了。我已经尝试了各种各样的东西，但在这方面真的很茫然。

这是我的代码（我取出了 img src 和 hrefs 以保持干净）：

<style>
.homePageGrid {
  margin-top: 125px;
  margin-bottom: 125px;
}

.homePageImageGrid {
  float: left;
  width: 33%;
  box-sizing: border-box;
  padding-left: 2%;
  padding-right: 2%;
}

.homePageImageGrid img {
  border-radius: 10px 10px 0px 0px;
  width: 100%;
}
</style>

<div class="homePageGrid">

<div class="homePageImageGrid">
    <img src = "#" width = "100%">
    <div class = "homePageImageLinkBox">
        <a href="" class="post-title">Cook with xx</a>
    </div>    
</div>

<div class="homePageImageGrid">
    <img src = "#" width = "100%">
    <div class = "homePageImageLinkBox">
        <a href="" class="post-title">Shop with xx</a>
    </div>               
</div>

<div class="homePageImageGrid">
    <img src = "#" width = "100%">
    <div class = "homePageImageLinkBox">
        <a href="" class="post-title">Give with xx</a>
    </div>              
</div>

<div style = "clear:both"></div>
</div>

【问题讨论】：

您使用的是float，因此您还需要清除floating。只需为父元素添加overflow:hidden。
感谢 Kheema - 不幸的是，浮动被清除并且溢出：隐藏在父元素上没有帮助。只是一个IE问题:(
可以做小提琴吗？
fiddle
对我来说它在 IE11 中的作品

标签： css image internet-explorer

【解决方案1】：

我检查了网站的 HTML 代码并找出了为什么会有巨大的垂直空间。之所以发生，是因为在 body 元素中添加了 display:flex 属性，我认为那里不需要。

从 body 元素中删除 display:flex 属性，它也可以在 IE 中完美运行。

【讨论】：