-webkit-border-radius действует по-разному от -moz-border-radius

Question

Мой сайт показывается по-разному в Safari и Firefox. Я хотел бы, чтобы CSS делал его похожим на Safari. Я знаю, что я мог бы использовать два div-бокса, один для контура, один для изображения, но мне нравится, как в Firefox мне нужен только один, и он вырисовывает контур и изображение. Есть ли в любом случае, чтобы кривая Safari отображала контур и изображение?

Safari:

Firefox:

<img src="asset.jpg" class="example">

img.example { width: 250px; height: 250px; background: rgba(0, 0, 0, .6); padding: 18px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

Answer 1

Это известная ошибка в WebKit браузерах

Смотреть это example

Короче говоря, да, потому что теперь у вас есть, чтобы обернуть изображение в DIV. Отстой.

Посмотреть эти сообщения об ошибках:

http://code.google.com/p/chromium/issues/detail?id=82417
https://bugs.webkit.org/show_bug.cgi?id=30475

В настоящем время, заверните его в DIV, as I have done here