-webkit-border-radius不能正确裁剪图像

Question

我有5个浏览器用于渲染HTML编码页面:IE9,Firefox 4.0以及所有最新版本的Chrome,Safari和Opera.现在在IE9和Firefox 4.0中,正在使用border-radius:和-moz-border-radius正确裁剪图像:但是在使用-webkit-border-radius:的Opera,Chrome和Safari中失败了.使用Opera时,图像根本没有被裁剪,而Safari和Chrome的图像有些裁剪,但边框也被裁剪掉了.

.nonTyp{
margin: 15px 15px 15px 15px;
border:4px inset #C1C8DD;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
width:200px;
height:200px;

}

如果你提到的3个浏览器中有一个使用-webkit-border-radius:请查看图片,例如我遇到的问题: 图形页面

Answer 1

您可以做的是将<img>标签上的所有样式现在放在父级上<a>，以便将其用作图像的容器。至少对我来说，这也更有意义。也不要忘记保留float: left图像以消除幻影底部边距。