Chrome / Safari中奇怪的圆角

Question

我有一个需要帮助的圆角问题。这是生成的HTML（在Wordpress中）：

<div class="deal_thumbnail clearfix">
<a href="page.html" title="Read More">
<img width="140" height="110" src="image.jpg" alt="read more" title="Read more" /></a>
</div>

这是CSS：

.deal_thumbnail
{
    float:left;
    width: 150px; 
}
.deal_thumbnail img
{
    float:left;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 48px;    
}

如果我将最后48px设置为18px它在FF中显示正常，则在Chrome / Safari（方形边缘）中根本不会圆。

如果我将其保留为48px，它会在FF中创建一个巨大的圆滑角（应该如此），这是我在Chrome / Safari中得到的：

为什么我没有得到18px的任何东西，并且在Chrome / Safari中获得48px的奇怪角落而在FF中一切都很好的任何想法？

Answer 1

试试这个：

.deal_thumbnail
{
    float:left;
    width: 150px; 
}
.deal_thumbnail img
{
    float:left;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;    
}