Question

我正在为客户端的shopify主题做一些自定义，并且我已经包含了一个简单的片段，它只是一个包含三个图像的网格，每个图像下面都有一个描述。每个图像/描述集的包含div都是浮动的。

除了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>

Answer 1

我已经检查了网站HTML代码并找出了存在巨大垂直空间的原因。它的发生是因为在body元素display:flex属性中添加了我认为不需要的属性。

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

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

1 个答案: