CSS 圆角在 Safari/Opera 中不起作用答案

【问题标题】：CSS Rounded Corners Not Working in Safari/OperaCSS 圆角在 Safari/Opera 中不起作用
【发布时间】：2011-09-13 04:24:13
【问题描述】：

我是 CSS 新手，但我正在尝试学习前端编码。我搜索了很多不同的网站，包括这个网站，试图找出为什么我的圆角在 Safari 或 Opera 中不起作用。我的代码已经包含了建议的大部分内容，而其他的似乎不适用于我的情况。我在 Mac (10.6.8) 上。在 Mozilla、IE9 和 Chrome 中运行良好。这是一个包含 swf 的容器 DIV。代码如下：

#container {
  height: 600px;
  width: 955px;
  margin-top: 16px;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  border-bottom-right-radius: 18px;
  border-top-left-radius: 18px;
  -webkit-border-bottom-right-radius: 18px;
  -webkit-border-top-left-radius: 18px;
  -o-border-bottom-right-radius: 18px;
  -o-border-top-left-radius: 18px;
  -moz-border-radius-bottomright: 18px;
  -moz-border-radius-topleft: 18px;
}

这是我网站的链接：www.mentalwarddesign.net

我也试过（为了它）在我不想受到影响的 2 个角上指示“0”值。此外，我尝试使用“border-radius: 18px”来简单地绕过所有角落。除了 Safari 和 Opera（当然，IE 6-8 也是如此）之外，两者都具有相同的工作效果。它一定很简单。如果我之前错过了这里回答的这个问题，请原谅我并指出我正确的方向。我在这里找到的最接近的帖子是：CSS rounded corners bug in Safari?，但我没有发现任何有用的信息。

【问题讨论】：

将您的非供应商特定声明放在供应商前缀版本之后。
或者不用担心供应商特定的声明，因为所有现代浏览器现在都支持border-radius
@kinakuta & @Michael Irogoyen。感谢您的小费。我对声明进行了重新排序，但为旧版本保留了特定于供应商的声明。但是仍然无法在 Saf/Opera 中正确显示。

标签： css

【解决方案1】：

在这里您可以找到带有代码的工作版本...

http://www.css3maker.com/

http://css3please.com/

【讨论】：

看来我的半径 CSS 代码是正确的，但我的问题出在其他地方。感谢您的链接，它们看起来像是很棒的资源！

【解决方案2】：

看起来这实际上是 Flash 播放器不符合overflow: hidden 的情况。据推测，它可以使用文本代替 swf？

IIRC，你必须在 swf 中添加一个 wmode <param />：

<param name="wmode" value="transparent">

【讨论】：

我刚刚用文本和纯色背景代替 swf 对其进行了测试，是的，你是对的。谢谢你的帮助。作为新手，很高兴知道我做了正确的事情，但有点沮丧的是我无法得到我想要的。有什么解决办法吗？
哦，我想这就是你用表示的。再次感谢，我会试一试。
@Ed：如果可行，请务必点击我的答案旁边的勾号。
是的，似乎不起作用。回到 Flash 文档并用透明窗口发布它并重新插入 swf（我正在使用 Dreamweaver）。并将 wmode 值更改为透明。这是我可以忍受的事情，我非常感谢你的帮助。谢谢。