重叠的圆角

在Safari 6或更早版本上 - 图像与圆角边界重叠。有这个简单的解决办法吗？我尝试添加一个带溢出的周边div：隐藏但结果相同。重叠的圆角

图像大小在手之前是未知的。

img { 
    border:5px solid black; 
    -webkit-border-radius:30px; 
    border-radius:30px; 
}

enter image description here

2013-09-25 Wesley

也许把'img'一个'div'并且对后者进行四舍五入？ –

-webkit-border-radius：5px; -moz-border-radius：5px; border-radius：5px; 对此有帮助吗？无法测试它，因为我没有旧版本 –

@Pekka - 不，已经试过了。需要漂浮它，并添加溢出：隐藏，因为我不知道手前的图像的大小。 – Wesley

如果图像大小不会改变，你可以使用一个<div>和设置图像为背景。

注意，我必须指定<div>的高度和宽度，因此图像会出现。

2013-09-25 15:43:44 jbaum012

不幸的是，大小可能会改变，并且不知道 - （facebook api结果）。 – Wesley

号不幸的是，这是在旧版本的Safari浏览器的一个已知的bug。（事实上，它也出现在其他旧版浏览器中，但受影响的版本已经无法使用）

浏览器在边界前绘制前景图像。这是没有办法的。

唯一解决方案是：

从使用前景图像的背景图像进行切换。这是有效的，但从语义角度来看是一种痛苦，并可能导致它自己的问题。
把img标签的div内，并直接把边境到div，而不是到img。这确实涉及额外的标记，但可能是修复它的最可靠的方法。请注意，您可能需要将div设置为display:inline-block，以便它缩小以适合图像的大小。
或者当然，你可以手动编辑你的图像;使用Photoshop（或GIMP，或任何其他使用的工具）给出圆角和边框，并且根本不需要CSS。它有点老派的解决方案，但它的工作是相当肯定的。

2013-09-25 16:09:13 Spudley

我试过你的第二个解决方案，但即使这似乎并不奏效。我得到完全相同的结果。我不知道这是为什么，因为我已经设置溢出隐藏：http://jsfiddle.net/89VvB/12/ – Wesley

嗯，哦，好吧。第二种解决方案曾经与其他一些浏览器有过类似的错误。 – Spudley

貌似开沟边界和使用-webkit-箱阴影，而不是答案是：

-webkit-box-shadow:0 0 0 5px black;

当然，我只能这样做的浏览器如Safari 6或早。

2013-09-26 15:31:33 Wesley

回答