Css 为什么边界半径：200px在Safari 5/6中不是圆形？

我使用了border radius:200px将图像做成圆形，它在IE10、chrome、Firefox上运行良好，但在safari 5和safari 6上它不是一个圆形

我的CSS代码是：

.team-member img {
  display: block;
  width:50%;
  height:auto;
  margin: 0 auto 20px;
  border: 4px solid #ccc;
  -webkit-border-radius: 200px;
  -khtml-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
}

当我删除边框：3px solid#ccc时，它在safari上运行良好，但我需要在图像周围保留边框，如何解决此问题？谢谢

---

演示如下：

我的印象是，这是Safari中的一个bug，与直接在图像上使用

边界半径有关；它实际上是使它成为一个圆，它只是没有使边界围绕着圆的边缘，而是被它切断了。我找到了一份可能并不理想的工作，但它可能适合你。基本上，将
边框
和
边框半径
应用于父对象。下面是一个例子：

和CSS：

.team-member {
    width: 200px;
    height: 200px;
    border: 4px solid #ccc;
    -webkit-border-radius: 200px;
    -khtml-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
    overflow: hidden;
    margin: 20px auto;
}

.team-member img {
  display: block;
  width:100%;
  height:auto;
}

根据您的截图：-尝试放大图像，它看起来还没有达到200px的全宽和全高

编辑：我为没有解决边境问题而道歉

我可以提出以下建议：

CSS:

更新：CSS地址Safari 5（在Safari 5.1.7及以上版本中测试）


.团队成员{
宽度：50%；
身高：0；
填充：0.50%；
边框：4px实心#999；
-moz边界半径：50%；
-webkit边界半径：50%；
边界半径：50%；
}
.团队成员img{
显示：块；
宽度：100%；
-moz边界半径：50%；
-webkit边界半径：50%；
边界半径：50%；
}
这似乎是一个Safari bug，而且似乎唯一的方法是使用边框半径设置img本身的样式，删除外部div的4px边框，并使用边距“模拟”它：

CSS:

。团队成员{
宽度：204px；
高度：204px；
-webkit边界半径：200px；
-khtml边界半径：200px；
-moz边界半径：200px；
边界半径：200px；
溢出：隐藏；
保证金：20px自动；
背景色：#ccc；
}
.团队成员img{
显示：块；
宽度：94%；
利润率：3%；
高度：自动；
-webkit边界半径：100%；
-khtml边界半径：100%；
-moz边界半径：100%；
}

HTML:




在Opera、Safari、Chrome和Firefox上进行了测试，它对我很有用

（未在IE10上测试，但也应该可以使用）
在Opera 12.15上也可以使用。我没有Safari，但是，你尝试过没有任何前缀的“边界半径”吗？是的，但它在Safari上的效果也不是很好。我可以证实这种行为。似乎4px边框只在水平和垂直方向上应用，圆形部分没有边框，safari问题？如果你想要一个圆圈，最好使用
100%
而不是
200px
。谢谢，但是，我在safari上检查过，它仍然不太好。真的吗？对我有用：你使用的是什么版本的Safari？我在Mac OS X 10.8.4上使用6.0.5。我真的无法测试Safari 5-抱歉。你能给我一张截图吗？我很好奇它是什么样子。很奇怪！试试这个？我还为图像添加了边框半径，这意味着它不能与边框重叠。然后，我在容器中添加了一个黑色背景，以消除细微的间隙。我不知道它是否对你有用。谢谢，它很好用！jsfiddle.net/kyfha/25，似乎我无法向图像添加边框，所以将边框添加到图像的out容器中。再次感谢！不，根据他的截图，你可以看到边框只在水平和垂直方向上应用，圆形部分没有边框，我试过了，但没有改变。只有删除图像的4px边框，它才能正常工作。


    .team-member {
      display: block;
      position: relative;
      width: 50%;
      height: 0;
      padding: 0 0 50%;
      border: 4px solid #999;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      overflow: hidden;
    }

    .team-member img {
      display: block;
      position: absolute;
      top: 0; right: 0;
      bottom: 0; left: 0;
      width: 100%;
      margin: auto;
    }




    .team-member {
      width: 50%;
      height: 0;
      padding: 0 0 50%;
      border: 4px solid #999;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
    }

    .team-member img {
      display: block;
      width: 100%;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
    }
<div class="team-member">
    <img src="http://1.s3.envato.com/files/59524429/logo-s.png" alt="Johnny">
</div>