html - 圆角重叠

Question

在 safari 6 或更早版本上 - 图像与圆形边框重叠。有一个简单的解决方法吗？我尝试使用 overflow:hidden 添加一个周围的 div，但结果是一样的。

图像大小事先也不知道。

http://jsfiddle.net/89VvB/

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

Answer 1

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

见http://jsfiddle.net/89VvB/5/

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

您可能还想看到这个：border-radius 在 safari 下失败（丑陋的剪裁）

Answer 2

不，不幸的是，这是旧版本 safari 中的一个已知错误。（实际上其他旧浏览器也有，但受影响的版本已经大部分停止使用）

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

唯一的解决方案是：

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

• 将img标签放在 a 内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 或更早版本的浏览器中执行此操作。