如何摆脱文字覆盖底部的随机几个像素

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即可。