Question

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

我创建了几个css按钮，它们在chrome，firefox和另一个版本的safari中看起来非常整洁我在视网膜macbook pro（6.0）上进行过测试

按钮在最新浏览器中的显示方式如下： http://d.pr/i/cHzX

然而，我的macbook air运行safari 6.0.3，这就是Safari 6.0.3.shows边框的方式： 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的每个css类：9999em

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

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

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

1 个答案: