圆角重叠

时间:2013-09-25 15:29:37

标签: html css safari

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

手前还不知道图像尺寸。

http://jsfiddle.net/89VvB/

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

enter image description here

3 个答案:

答案 0 :(得分:0)

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

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

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

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

答案 1 :(得分:0)

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

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

唯一的解决方案是:

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

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

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

答案 2 :(得分:0)

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

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

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

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