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

Question

我有 5 个浏览器用于呈现 html 编码的页面:IE9、Firefox 4.0 和所有最新版本的 Chrome、Safari 和 Opera。现在在 IE9 和 Firefox 4.0 中使用 border-radius: 和 -moz-border-radius: 可以正确裁剪图像，但在 Opera、Chrome 和 Safari 中使用 -webkit-border-radius: 会失败。在 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: 请查看图像，例如我遇到的问题: Graphics Page

Answer 1

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