css - 在圆形溢出 div 中包含图像

Question

Chrome 在包含带有 overflow:hidden 圆形 div 的图像时工作正常，但是 safari 在这方面做得不好，overflow: hidden 在这里似乎不起作用。

举个例子

这是我的 sass 代码:

.profile-image-container
  position: relative
  top: 3px
  display: inline-block
  cursor: pointer

  .profile-image 
    width: 33px
    height: 33px
    display: block
    position: relative
    border: 2px solid $default-border-color
    position: relative
    top: -5px
    border-radius: 50%
    -moz-border-radius: 50%
    -webkit-border-radius: 50%
    overflow: hidden

哈姆:

.profile-image-container
    .profile-image
      =image_tag "avatar.jpg"
    %span.status.online
      %i.icon.icon-check-small

fiddle : http://jsfiddle.net/LB2EQ/

Answer 1

问题 1. 在 Safari 中图像不继承 border-radius，因此您必须添加它。

问题 2. 您的图像的宽度和高度与个人资料图片容器不同，这就是为什么如果您不调整大小，您会看到非常奇怪的边框半径(仅左上角)

.profile-image img{
    width:33px;
    height:33px;
    border-radius:50%;
}

请参阅 jsfiddle 上的工作解决方案:http://jsfiddle.net/LB2EQ/1/