使用Ul LI浮雕的圖庫

我有一個圖庫視圖，其中我使用UL LI元素和左浮動圖案，使其像基於內容所需的多個線條一樣坐在畫廊中。在第一行之後，它看起來像乾草一樣，如下圖所示。貌似問題是在Firefox在Mac/Win7的使用Ul LI浮雕的圖庫

enter image description here

鏈接：http://archangle.mink7.com/portfolios（頁腳圖庫）

<ul class="gallery"> 
             <li> <a href="#"> <img alt="video" src="/img/portfolios/video.jpg"> <span><i class="fa fa-link"></i></span> </a> </li> 
             <li> <a href="#"> <img alt="Concept Gallery" src="/img/portfolios/concept-gallery-2.jpg"> <span><i class="fa fa-link"></i></span> </a> </li> 
             <li> <a href="#"> <img alt="Concept Gallery" src="/img/portfolios/concept.jpg"> <span><i class="fa fa-link"></i></span> </a> </li> 
             <li> <a href="#"> <img alt="Residential Gallery" src="/img/portfolios/residential-gallery2.jpg"> <span><i class="fa fa-link"></i></span> </a> </li> 
             <li> <a href="#"> <img alt="Residential Gallery" src="/img/portfolios/residential-gallery-1.jpg"> <span><i class="fa fa-link"></i></span> </a> </li> 
             <li> <a href="#"> <img alt="Commercial Image" src="/img/portfolios/commercial-gallery-2.jpg"> <span><i class="fa fa-link"></i></span> </a> </li> 
            </ul>

CSS：

.gallery { 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
} 
.gallery li { 
    float: left; 
    width: 33%; 
} 
.comment-image, .gallery li, .post-small .image, .post-image, .portfolio-item { 
    display: block; 
    position: relative; 
}

來源

2014-06-18 Harsha M V

請張貼您的代碼。 – j08691

對我來說似乎很好。這只是與IE瀏覽器的問題？ – Abhitalks

對不起發佈代碼：D –

的高度在FireFox中inconsitenet因此你在最後一行得到一個孤兒。嘗試添加到您的畫廊李的：

.gallery li { 
    float: left; 
    width: 33%; 
    height:100px; 
    overflow:hidden; 
}

這將迫使您的圖像容器（李的）一致的高度，並切斷任何多餘的圖像高度。

來源

2014-06-18 14:44:20 ezekielDFM

圖像大小相同。我試過，但仍然沒有好起來 –

我認爲你的「img」標籤最後缺少「/>」，所以也可能會導致FirFox中的標記錯誤。我在jsfiddle中重新創建了您的畫廊（缺少懸停，但顯示正確）。這適用於我在Firefox中：http://jsfiddle.net/4dz6c/9/ – ezekielDFM

謝謝你將檢查：D –

使用Ul LI浮雕的圖庫

回答

相關問題