css - Safari 中不显示圆 Angular

Question

我在 PC 上工作，所以我没有意识到我遇到了这个问题。基本上，我的容器的圆 Angular 没有在 safari 中显示，这很奇怪，因为我相信我使用的代码与 Safari 兼容。对此的任何意见将不胜感激。

这是我的容器代码:

.container {
  clear: both;
  margin: 20px auto;
  width: 940px;
  background: #fff;
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
/*   overflow-x: hidden; */
  *zoom: 1;
}

然后我的网站基本上就被包裹在里面了:

<div class="container">
    WEBSITE
</div>

如果你有safari，可以查看issue here .

Answer 1

您的问题是您已经获得了所有带前缀的 border-radius 版本，但是您还没有获得标准的无前缀版本。

需要添加border-radius: 10px;

是的，Safari 是一个 Webkit 浏览器，因此您可能认为 -webkit-border-radius 应该可以工作，但前缀版本只应在样式处于试验阶段时存在。一旦它成为标准，浏览器就应该放弃对前缀版本的支持，而只支持标准版本。

border-radius 很久以前就成了标准，所以现在所有的浏览器应该都支持没有前缀的标准版本。一些浏览器仍然支持它们的前缀，但它们可能会在任何版本中放弃支持。

这同样适用于 box-shadow 和所有其他 CSS 样式——如果您要声明前缀，您也应该始终声明没有前缀的标准版本。

希望对您有所帮助。