照片網格中的不需要的底部邊距Internet Explorer

這個問題很簡單，但在瀏覽網頁幾個小時後，我仍無法解決它。我有一個與嵌套圖像網格的div。一切工作正常鉻，但不是在IE瀏覽器。由於某些隨機原因，它增加了底部邊距。我無法擺脫。我試過漂浮，clearfix和其他很多東西，但它只是不會做出反應。照片網格中的不需要的底部邊距Internet Explorer

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; 
    }

來源

2015-11-24 user3183915

沒有看到更多的代碼，我們只能猜測解決方案。 '.bodyContainer {height：auto;}'可能是問題。這只是您向我們展示的圖片，所以我們不知道。你可能會考慮着色'.bodyContainer'，所以我們可以看到是否還有更多的元素需要了解......或者更好，包括更多的代碼。 – PHPglue

您遇到哪些版本的IE？ – partypete25

@PHPglue我已經添加了彩色的打印屏幕以及與這兩個div容器相關的所有代碼。 – user3183915

顯著閒逛我有所解決之後嘛。第一個問題是全部2％的保證金。用2％將其替換爲圖像的底部和左側。其次，由於圖像大小不同，因此會將填充添加到圖像本身（這僅是IE問題），因此我刪除了填充。第三，我裁剪圖像，以便它們都能堅持嚴格的比例。也許是一個簡單的出路，但它適用於我的情況。謝謝每個想要幫助的人。

乾杯！

來源

2015-11-24 22:00:48 user3183915

照片網格中的不需要的底部邊距Internet Explorer

回答

相關問題