html錨重疊縮略圖/在圖像下創建白色條紋

我創建了一個無序列表，其中標有我的縮略圖。現在（正如Firebug告訴我的），錨標記與我的縮略圖重疊，在我的圖像下創建了白色條紋。這是到目前爲止我的代碼：html錨重疊縮略圖/在圖像下創建白色條紋

HTML：

<div class="wrapper"> 
     <ul class="masonry"> 
      <li class="item"> 
       <a class=lightbox" href="1.jpeg"> 
       <img alt="1.jpeg" src="thumb/1.jpeg"> 
       </a> 
      </li> 
     </ul> 
    </div>

CSS：

.wrapper{ 
    width:90%; 
    margin: auto; 
    padding: 20px; 
} 
.masonry { 
    column-count: 4; 
    -moz-column-count: 4; 
    column-gap: 0.5em; 
    -moz-column-gap: 0.5em; 
    -webkit-column-gap: 0.5em; 

} 
.item{ 
    background: #eee; 
    display: inline-block; 
    width: 100%; 
    margin: 0 0 0.5em 
    box-sizing: border-box; 
    moz-box-sizing: border-box; 
    webkit-box-sizing: border-box; 

} 
.item a{ 
    margin: 0; 

} 
.item img{ 
    width: 100%; 
    margin: 0; 

}

Example

你可以看到這個問題住在my homepage

來源

2016-05-24 Till

嗨，歡迎來到SO。僅供參考，在Chrome瀏覽器中，您的頁面也顯得非常不同。您可能會同時使用Firefox和Chrome來對問題進行三角測量... – rrauenza