如何擺脫文字覆蓋底部的隨機幾個像素

Question

我在設計的網站上有一個透明文字覆蓋的圖像。

即使我的所有寬度和高度均爲100％，透明覆蓋圖看起來像是比圖像長兩個像素。遊戲中沒有邊距或填充。

我花了最後半個小時試圖弄清楚爲什麼它在那裏，所以我可以擺脫它。任何幫助，將不勝感激。

注：我使用的是一個負責任的CSS框架，所以我不能使用任何絕對高度或任何

下面是對活動網站的鏈接：http://fine-grain-2.myshopify.com/

下面是HTML：

<div class="six columns alpha"> 
    <div class="thumb"> 
     <img src="http://cdn.shopify.com/s/files/1/0209/0122/products/MG_9507_large.jpg?348" alt="" /> 
     <div class="overlay"> 
      <a href="/products/the-bowden-brown-cherry"> 
      <h2>THE BOWDEN</h2> 
      <h3>brown + cherry</h3> 
      </a> 
     </div> 
    </div>     
</div> 

這裏是CSS：

#home img, a, .column, .columns { 
    padding: 0; 
    margin: 0; 
    width: 100%; 
} 

#home .six.columns { 
    padding-bottom: 40px; 
    position: relative; 
} 

#home .six.columns.alpha { 
    padding-right: 40px; 
} 

#home .six.columns .thumb { 
    display: block; 
    width: 100%px; 
    height: 100%px; 
    text-decoration: none; 
    padding: 0; 
    margin: 0; 
    position: relative; 

} 

#home .six.columns .overlay { 
    position:absolute; 
    top:0; 
    left:0; 
    opacity:0; 
    width: 100%; 
    height: 100%; 
    text-decoration: none; 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.75); 
    margin: 0; 
    padding: 0; 
} 

#home .six.columns .thumb:hover .overlay { 
    opacity: 1; 
} 

#home .six.columns h2 { 
    color: #FAFAFA; 
    display: block; 
    font-size: 1.8em; 
    font-weight: lighter; 
    letter-spacing: 0.3em; 
    margin-top: 27%; 
    text-align: center; 
} 

#home .six.columns h3 { 
    color: #FAFAFA; 
    display: block; 
    font-size: 1em; 
    font-weight: lighter; 
    letter-spacing: 0.6em; 
    text-align: center; 
} 

Answer 1

只需將display: block;設置爲.thumb img即可。