1

我为我的播放器创建了一个径向播放按钮并且我使用 css flex 将播放图标居中。它在 chrome 中运行良好，但在 safari 浏览器中运行良好。

在此处输入图像描述

在我的CSS中，我有这样的东西：

.inset {
     width: @inset-size;
     height: @inset-size;
     position: absolute;
     margin-left: 20px;
     margin-top: 20px;
     background-color: @circle-background;
     border-radius: 50%;
     border: 3px solid #192D48;
     font-size: 50px;

     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;       
     justify-content: space-around;
     -webkit-justify-content: space-around;

     i {
       -webkit-align-self: center;
       align-self: center;
       color: black !important;
       top: 0px;
       left: 1px;
     }
}

我已经display: -webkit-flex;在 safari 中添加了对 flex 的支持，但不幸的是它不起作用，当我在 safari 的调试器样式中检查它时，它上面没有display: -webkit-flex;，但出现了空格-webkit-justify-around。

在此处输入图像描述

但是当我以这样的风格对其进行硬编码时：

   <div class='scr-button radial-progress'>
      <div class="circle-gray"></div>
      <div class="circle">
        <div class="circle-white"></div>
        <div class="mask full" ng-style="{'transform': currTime}">
          <div class="fill" ng-style="{'transform': currTime}"></div>
        </div>
        <div class="mask half">
          <div class="fill" ng-style="{'transform': currTime}"></div>
          <div class="fill fix" ng-style="{'transform': currTime * 2}" ></div>
        </div>
      </div>
      <div class="inset" ng-click="play()" style="display: -webkit-flex;">
        <i ng-class="icon()"></i>
      </div>
  </div>

它工作正常，有人能解释一下为什么当我把它放在课堂上时它不起作用吗？是浏览器问题吗？还是我做错了？

规格：更少，Safari 版本：8.0.8 版，Angularjs

4

0 回答 0