使用border-radius时safari 6.0.2中的波纹css边框

Question

根据标题，我在 Safari 上遇到了一个很奇怪的问题，不确定它是否是众所周知的，但我真的不知道如何研究其​​他线程。

我创建了一些 css 按钮，它们在 chrome、firefox 和我在视网膜 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;
      }
    }

Answer 1

将以下内容添加到您拥有border-radius:9999em的每个css类中

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

safari 和 chrome 使用 -webkit 和 -moz 用于我的 mozilla。