在圆形溢出div中包含图像

Question

Chrome在包含带溢出的图像时效果很好：隐藏的舍入div，但是safari在这方面做得不好，溢出：隐藏似乎不起作用。

这是一个例子

这是我的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

HAML：

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

小提琴： http://jsfiddle.net/LB2EQ/

Answer 1

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

问题2。您的图片有不同的宽度＆amp;高度比配置文件pic容器，这就是为什么你会看到一个非常奇怪的边界半径（只有左上角），如果你不调整它。

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

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