0

Chrome は、overflow:hidden の丸められた div を含む画像を含む場合に正常に機能していますが、サファリはこれでうまく機能しません。overflow: hidden はここでは機能しないようです。

これが例です

クロム

サファリ

ここに私のサスコードがあります:

.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

フィドル: http://jsfiddle.net/LB2EQ/

4

1 に答える 1

1

問題 1. Safari では画像が継承されないためborder-radius、追加する必要があります。

問題 2.画像の幅と高さがプロフィール写真コンテナーとは異なるため、サイズを変更しないと非常に奇妙な境界線 (左上のみ) が表示されます。

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

jsfiddle の実用的なソリューションを参照してください: http://jsfiddle.net/LB2EQ/1/

于 2013-05-22T02:55:42.053 に答える