是Safari&移动Safari呈现圆角边框的半径和填充不正确？ [英] Are Safari & Mobile Safari rendering rounded borders with radius and padding incorrectly?

问题描述

Safari和Mobile Safari似乎在您组合边框半径，边框和边框时有问题。

Safari and Mobile Safari seem to have a problem when you combine border radius, padding and borders. Works fine in Chrome and Firefox.

< - 预期

<-- Expected

< - Safari Rendering

<-- Safari Rendering

HTML：

<img src="http://lorempixel.com/200/200/animals/3/" />

CSS：

img {
    width: 200px;
    height: 200px;
    -webkit-border-radius: 500px;
    -moz-border-radius:    500px;
    border-radius:         500px;
    padding: 3px;
    border: 1px solid #999;
    margin: 10px
}

示例： http://jsfiddle.net/ucNwx/2/

它我的错或safaris？

Is it my fault or Safaris? How would I fix it?

推荐答案

我打赌它的Safari bug： border-radius 应用迟到并产生裁剪效果。幸运的是， box-shadow 正确渲染，所以让我们使用它：

My bet it's Safari bug: border-radius is applied late and produces clipping effect. Fortunately, box-shadow is rendered correctly, so let's use it:

border-radius: 50%;
box-shadow:
  0 0 0 3px white,
  0 0 0 4px #999;

在iPad 6和OS X上的Safari 6上运行。

这篇关于是Safari&amp;移动Safari呈现圆角边框的半径和填充不正确？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！