0

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

我创建了一些 css 按钮，它们在 chrome、firefox 和另一个版本的 safari 上看起来很整洁，我在视网膜 macbook pro (6.0) 上测试过

这是按钮在最新浏览器上的外观：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的每个css类中：9999em

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

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

于 2012-12-06T18:05:21.170 回答