Question

我使用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实心#ccc，它在safari上工作正常，但我需要保留图像周围的边框，如何解决这个问题？感谢!!!

演示在这里：http://jsfiddle.net/badjohnny/kyfha/

Answer 1

我的印象是，这是Safari中与在图片上直接使用border-radius相关的错误;它实际上是一个圆形，它不是让边界围绕圆的边缘，而是被它切断。我找到了一件可能不太理想的作品，但它可能适合你。基本上将border和border-radius应用于父级。这是一个例子：http://jsfiddle.net/kyfha/4/

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;
}

Answer 2

似乎它是一个Safari bug，并且似乎唯一的方法是通过使用边框半径设置img本身，删除外部div的4px边框并使用边距“模拟”它：

CSS：

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

.team-member img {
    display: block;
    width:94%;
    margin:3%;
    height:auto;
    -webkit-border-radius: 100%;
    -khtml-border-radius: 100%;
    -moz-border-radius: 100%;
}

HTML：

<div class="team-member">
    <img src="http://1.s3.envato.com/files/59524429/logo-s.png" alt="Johnny">
</div>

JSFiddle

在Opera，Safari，Chrome和Firefox上测试过，它对我有用。

（未在IE10上测试，但它也应该在IE10上运行）

Answer 3

根据您的屏幕截图：http://d.pr/i/Z3E3 - 尝试将图片放大，看起来它还没有达到200px的全宽和高度。

修改：我对未解决边境问题表示道歉。

我可能会建议以下内容：http://jsfiddle.net/jgagne/HPjzt/7/

CSS：



    .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;
    }

更新： CSS解决了Safari 5（在Safari 5.1.7及更高版本中测试过）。



    .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%;
    }

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

3 个答案: