照片网格 Internet Explorer 中不需要的底部边距答案

【问题标题】：Unwanted bottom margin in photo grid Internet Explorer照片网格 Internet Explorer 中不需要的底部边距
【发布时间】：2016-02-26 07:13:13
【问题描述】：

问题很简单，但是在网上冲浪了几个小时后，我仍然无法解决。我有一个带有嵌套图像网格的 div。在 chrome 中一切正常，但在 IE 中却不行。由于某种随机原因，它增加了底部边距。我无法摆脱。我尝试了浮动、clearfix 和许多其他的东西，但它就是不会做出反应。

Colorized image

  <section class="body">
   <div class="bodyContainer" id="photos">
    <img src="images/Ernst Neizvestny.jpg" />
    <img src="images/Erik Boulatov.jpg" />
    <img src="images/Eugene Yelchin.jpg" />
    <img src="images/GeniaChef.jpg" />
    <img src="images/Ilya Kabakov.jpg" />
    <img src="images/KomarAndMelamid.jpg" />
    <img src="images/Kosolapov-Alexander.jpg" />
    <img src="images/Oleg Tselkov.jpg" />
    <img src="images/Lev Meshberg.jpg" />
    <img src="images/Leonid Sokov.jpg" />
    <img src="images/Vassiliev-Oleg.jpg" />
    <img src="images/Rapoport.jpg" />
    <img src="images/Vladimir Nemukhin.jpg" />
    </div>
   </section>

CSS：

    #photos {
    /* Prevent vertical gaps */
    line-height: 0;
    -webkit-column-count: 4;
    -webkit-column-gap: 0px;
    -moz-column-count: 4;
    -moz-column-gap: 0px;
    column-count: 4;
    column-gap: 0px;
    margin:0 auto;
    padding:0;
    background-color: red;

}
#photos img {
    /* Just in case there are inline attributes */
    width: 100%;
    height: 100%;
    margin: 1%;
    padding:0;
    vertical-align: top;
    background-color:green;
}
/* CSS Document */
 @media (max-width: 1000px) {
    #photos {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}
@media (max-width: 800px) {
    #photos {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
@media (max-width: 400px) {
    #photos {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

   .body {
    margin:0;
    padding:0;
    clear:both;
}
.bodyContainer {
    width:80%;
    height:auto;
    margin:0 auto;
}

@media only screen and (min-width : 641px) {

    .body {
        clear: both;
        min-height: 100px;
    }
    .bodyContainer {
        clear: both;
        min-height: 100px;
        margin-left:auto;
        margin-right:auto;
    }

【问题讨论】：

没有看到更多代码，我们只能猜测解决方案。 .bodyContainer{height:auto;} 可能是问题所在。那只是您向我们展示的图像，所以我们不知道。你可以考虑给.bodyContainer上色，这样我们可以看看是否有更多我们应该知道的元素......或者更好的是，包括更多的代码。
您对哪个版本的 IE 有问题？
@PHPglue 我添加了彩色打印屏幕以及与这 2 个 div 容器相关的所有代码。
@partypete25 IE 11 以及 Microsoft Edge
Webkit CSS3 column adds an extra padding to its container.的可能重复

标签： html css internet-explorer margin

【解决方案1】：

经过大量的探索后，我稍微解决了它。第一个问题是 2% 的利润率。只需将其替换为图像底部和左侧的 2%。其次，由于图像的大小都不同，它为图像本身添加了填充（这仅是 IE 问题）所以我删除了填充。第三，我裁剪了图像，使它们都保持严格的比例。也许是一个简单的出路，但它适用于我的情况。感谢所有试图提供帮助的人。

干杯！

【讨论】：