html - 图像在 chrome 和 mozilla 中不同

Question

同一张图片在 Mozilla 中看起来很完美，但在 Chrome 中浏览时却不完美。这是图片。谁能告诉我为什么会出现这些类型的错误以及如何解决。

第一个是 Mozilla，第二个是 Chrome。

CSS 代码是，

.freeimg
{
    position            : relative;
    top                 : 80px;
    border              : 1px solid #CCCCCC;
    border-right        : 0;
    background-color    : #FFF;
    cursor              :  pointer;
    margin-left         : -35px;
    -moz-border-radius  : 10px 0px  0px 10px;
}

HTML代码一如往常。

<div class="fl freeimg" style="float:left;">
 <img src="/images/freeImg.gif" height="160" width="32" onClick="SlideMe()" />
</div>

Answer 1

添加font-size:0

HTML

<div class="fl freeimg">
 <img src="http://www.brightpay.co.uk/i/signup-launcher.png" onClick="SlideMe()" />
</div>​

CSS

 .freeimg
{
    position            : relative;
    float:left;
    top                 : 80px;
    border              : 1px solid #CCCCCC;
    border-right        : 0;
    background-color    : #FFF;
    cursor              :  pointer;
    border-radius  : 10px 0px  0px 10px;
    font-size:0
}    
.freeimg img
{        
    border-radius  : 10px 0px  0px 10px;
     margin:0; padding:0
}​

DEMO