Question

我在PC上工作，所以我没有意识到我遇到了这个问题。基本上，我的容器的圆角没有在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，则可以查看问题here。

Answer 1

你的问题是你有border-radius的所有前缀版本，但你还没有标准的无前缀版本。

您需要添加border-radius: 10px;

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

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

这同样适用于box-shadow以及其他所有CSS样式 - 如果要声明前缀，则还应始终声明未加前缀的标准版本。

希望有所帮助。

Answer 2

考虑@Spudley提供的答案，以防它无法解决问题

你可以做的事情很少：

1）检查您的Safari版本

正如@Adrift在评论中指出的那样，这可能是兼容性问题。

2）您的css代码中可能存在不可见的字符

这个问题经常发生，因此让程序员在数小时内难以找到问题。尝试将代码写入另一个文件或使用一些显示隐藏字符的好编辑器。

在Safari中不显示圆角

2 个答案: