0

我在 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，可以在此处查看问题。

4

2 回答 2

3

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

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

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

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

这同样适用于box-shadow和其他所有 CSS 样式——如果你声明前缀，你也应该总是声明无前缀的标准版本。

希望有帮助。

于 2013-07-31T13:27:26.123 回答
0

考虑@Spudley提供的答案，以防万一它不能解决问题

您可以做的几件事：

1)检查您的 Safari 版本

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

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

这个问题经常发生，因此使程序员苦苦挣扎几个小时才能找到问题。尝试将代码写入另一个文件或使用一些显示隐藏字符的好编辑器。

于 2013-07-31T13:27:35.670 回答