0

タイトルのとおり、Safari で非常に奇妙な問題に遭遇しました。よく知られている問題かどうかはわかりませんが、それについて他のスレッドを調査する方法が本当にわかりませんでした。

私はいくつかのCSSボタンを作成しました.Chrome、Firefox、およびRetina Macbook Pro（6.0）でテストしたSafariの別のバージョンではかなりきれいに見えます

これは、最近のブラウザでボタンがどのように見えるかです: http://d.pr/i/cHzX

ただし、私の macbook air は safari 6.0.3 を実行しており、それが Safari 6.0.3 の境界線の表示方法です: http://d.pr/i/fcfl

この種のバグを修正する方法を知っている人はいますか?

これは、これらのボタンを生成する css (sass) です。

    .button{
      position:relative;
      z-index:1;
      display:block;
      width:175px;
      margin:0 15.5px;
      cursor:pointer;

      span{

        @include border-radius(9999em);
        display:block;
        width:175px;
        height:48px;
        line-height:48px;
        font-size:1.4em;
        font-weight:bold;
        color:#FFF;

        &:before{
          @include border-radius(9999em);

          margin-top:5px;
          content:'.';
          text-indent:-9999em;
          position:absolute;
          z-index:-1;
          top:0;
          left:0;
          width:177px;
        }
      }

      &:active{
        outline:none;
        top:4px;

        span{
          &:before{
            top:-4px;
          }
        }

      }

      &:focus{
        outline:none;
      }
    }

    .orange-button span{
      @include background(linear-gradient(#FDAC26, #FB6336));
      border:1px solid #6B2B10;
      text-shadow:0 1px 0 #6B2B10;

      &:before{
        background:#AF431D;
        color:#AF431D;
        border-bottom:1px solid #6B2B10;
      }
    }

    .green-button span{
      @include background(linear-gradient(#7EC84B, #73B543));
      border:1px solid #3B5A22;
      text-shadow:0 1px 0 #3B5A22;

      &:before{
        background:#649039;
        color:#649039;
        border-bottom:1px solid #3B5A22;
      }
    }
4

1 に答える 1

0

border-radius:9999em があるすべての css クラスに以下を追加します。

-webkit-border-radius:9999em;
-moz-border-radius:9999em;

safari と chrome は -webkit を使用し、-moz は私の mozilla で使用されます。

于 2012-12-06T18:05:21.170 に答える