在一個圓形的溢出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

回答

相關問題