CSS закругленные углы в iframe в Safari - PullRequest
Новая
       21

CSS закругленные углы в iframe в Safari

1 голос
/ 26 октября 2011

Я пытаюсь включить 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;
}

Заранее спасибо

Ответы [ 4 ]

2 голосов
/ 26 октября 2011

вам лучше дать .somediv, если его непосредственный родитель закругленные углы. Закругленные углы определенно работают на div в сафари.

1 голос
/ 31 января 2013

Я думаю, вы могли бы просто сделать это, чтобы обойти проблему. Поместите один и тот же класс на обоих. 

<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>
1 голос
/ 26 октября 2011

Попробуйте положить border-radius на обёртку div и установить overflow:hidden на него.Не пробовал, но это может сработать.

1 голос
/ 26 октября 2011

Закругленные углы определенно работают на div в Safari ... но нет, если вы добавите iframe.Пожалуйста, проверьте код, который приведен ниже - он не работает ни в одном браузере ... но если вы измените: 

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

на 

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

, тогда будет работать в Chrome, ff и ie9, но все еще не в сафари ...

Код: 

<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>
...