在一个圆形的溢出DIV

含铬图像中包含一个溢流的图像做工精细：隐藏圆格，但Safari不以这个做好，溢出：隐藏似乎并不在这里工作。在一个圆形的溢出DIV

这里是一个例子

chrome

safari

这里是我的青菜代码：

.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/

来源

2013-05-22 Harvey Katrina

后，HTML和CSS和http://jsfiddle.net – user2019515

分享您的HTML和CSS代码的JS斌或JS小提琴，使我们可以采取看看它。 –

这里是小提琴http://jsfiddle.net/LB2EQ/ –

问题1.在Safari中的图像不继承border-radius，所以你必须添加它。

问题2：你的图像具有不同的宽度&高度比配置PIC容器这就是为什么你会看到一个非常奇怪的边界半径（仅左上），如果你不调整其大小。

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

查看的jsfiddle工作液：http://jsfiddle.net/LB2EQ/1/

来源

2013-05-22 02:55:42 user2019515

是的，这是我以前的解决方案，直接将边框半径应用到图像。但我想知道是否会有解决我上面的标记。 –

我不这么认为 – user2019515

在一个圆形的溢出DIV

回答

相关问题