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 中根本不圆（方形边缘）。

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

有什么想法为什么我在 18 像素处没有得到任何东西，而在 Chrome/Safari 中却在 48 像素处得到奇怪的角落，而在 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;    
}