Safari中iframe中的CSS圆角答案

【问题标题】：CSS rounded corners in iframe in SafariSafari中iframe中的CSS圆角
【发布时间】：2014-02-14 20:14:44
【问题描述】：

我正在尝试包含带有圆边的 iframe - 我的解决方案在 IE9、FF、Chrome 中运行良好，但在 Safari 中却不行。是否有任何方法（JS、CSS 等）具有圆边的 iframe？目前我有以下代码：

.somediv iframe{
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
}

提前致谢

【问题讨论】：

标签： css safari rounded-corners

【解决方案1】：

如果 .somediv 的直接父级是圆角，你最好给它。圆角绝对适用于 div 在 safari 中。

【讨论】：

【解决方案2】：

尝试将border-radius 放在包装器div 并在其上设置overflow:hidden。没试过，但是可以。

【讨论】：

感谢您的提示，但问题仍然存在于 Safari 中（在 FF 和 Chrome 中都可以）。

【解决方案3】：

圆角绝对适用于 Safari 中的 div...但如果您添加 iframe，则不会。请查看下面的代码 - 它在任何浏览器中都不起作用... 但如果你改变：

<div class="somediv" >
    <iframe class="" ...>

到

<div class="" >
    <iframe class="somediv" ...>

然后可以在 chrome、ff 和 ie9 中工作，但仍然不能在 safari...

代码：

<html>
<head>
  <style>
    .somediv {
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      -khtml-border-radius: 20px;
      border-radius: 20px;
      border: 2px solid red;
      height: 225px;
      width: 400px;
    }
  </style>
</head>
<body>
  <div class="somediv" >
    <iframe class="" width="400" height="225" frameborder="0" src="http://player.vimeo.com/video/30239097?title=0&amp;byline=0&amp;portrait=0">
    </iframe>
  </div>
</body>
</html>

【讨论】：

【解决方案4】：

我想你可以这样做来解决这个问题。将相同的类放在两者上。

<html>
<head>
  <style>
    .somediv {
      border-radius: 50%;
      width: 400px;
      height: 400px;
    }
  </style>
</head>
<body>
  <div class="somediv" >
    <iframe class="somediv" width="400" height="400" frameborder="0" src="http://player.vimeo.com/video/30239097?title=0&amp;byline=0&amp;portrait=0">
    </iframe>
  </div>
</body>
</html>

【讨论】：