圆角重叠

Question

在safari 6或更早版本中 - 图像与圆形边框重叠。有一个简单的解决方案吗？我尝试添加一个带溢出的周围div：隐藏但结果是一样的。

手前还不知道图像尺寸。

http://jsfiddle.net/89VvB/

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

Answer 1

如果图像尺寸不会改变，您可以使用<div>并将图像设置为背景。

请参阅http://jsfiddle.net/89VvB/5/

请注意，我必须指定<div>的高度和宽度，以便显示图像。

您可能还想看到这个：border-radius fails under safari (ugly clipping)

Answer 2

没有。不幸的是，这是旧版safari中的一个已知错误。 （实际上它也出现在其他旧的浏览器中，但受影响的版本已经不再使用了）

浏览器在边框前面绘制前景图像。没有办法解决这个问题。

唯一的解决方案是：

• 从使用前景图像切换到背景图像。这是有效的，但从语义角度来看是一种痛苦，并且可能导致它自身的问题。

• 将img标记放在div内，并将边框放在div上，而不是直接放在img上。这确实涉及额外的标记，但可能是最可靠的修复方法。请注意，您可能需要将div设置为display:inline-block，以便缩小以适合图像的大小。

• 当然，您也可以手动编辑图像;使用Photoshop（或Gimp，或您使用的任何其他工具）给它圆角和边框，你根本不需要CSS。它有点像老派的解决方案，但相当肯定可以工作。

Answer 3

看起来放弃边框并使用-webkit-box-shadow代替答案：

http://jsfiddle.net/2QyY3/40/

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

当然，我只在safari 6或更早版本的浏览器中执行此操作。