Круглые CSS уголки в мозиле у тега img

[denisator]

Делаю закруглённые уголки у тега img при помощи CSS:

img.catalog_main_item_img { margin-bottom: 5px; border: 2px solid white; overflow: hidden; display: block;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    -khtml-border-radius: 16px;
    border-radius: 16px;}

и возникает проблема в мозиле: уголки картинки не хотят прятаться под закругление.

Вот так:

Как решить проблему?

Хотелось бы обойтись без засовывания картинки в бэкграунд диву.

[hypnocolor]

Гм, ну, лично у меня в 11-м Файрфоксе всё закругляется. Равно, как и в Опере, и в Хроме.

[Softlink]

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

[DImas95]

А может попробовать z-index для обертки установить большой, и тогда он будет перекрывать картинку и создастся иллюзия что и картинка с скругленными углами? Но не уверен, первое что пришло в голову.

[denisator]

  Quote

Гм, ну, лично у меня в 11-м Файрфоксе всё закругляется. Равно, как и в Опере, и в Хроме.

м-мда.. походу это косяк старого файрфокса. У меня версия 3.5.1 :-)

Походу забью на эту проблемму, пусть у старья остаются острые уголки :-)

Всем спасибо, вопрос закрыт.

[Svatov]

А почему бы <div>у которому задать требуемые скругления и в котором находится <img> не задать overflow:hidden;

У вас как я заметил overflow задается почему то картинке.

Edited April 22, 2012 by Svatov

[SelenIT]

Кстати, послезавтра официально заканчивается поддержка FF3.6 для неандертальцев. Наконец можно будет полностью забыть о префиксах для border-radius и box-shadow!

[Vin]

И что, все сразу бросятся обновляться? Я отчасти понимаю этих "неандертальцев". Сам попробовал FF4 ещё когда он был в бета-версии, и, изрядно поплевавшись, вернулся на 3.6, но всё-таки сумел пересилить себя к выходу FF5. На рабочем компе, на котором стоит ХРюша, "лису" использую с этой штукой Firefox 3 theme for Firefox 4+

[denisator]

  On 4/22/2012 at 9:41 AM, Svatov said:

А почему бы <div>у которому задать требуемые скругления и в котором находится <img> не задать overflow:hidden;

У вас как я заметил overflow задается почему то картинке.

Ну я изначально закруглял углы не у дива а именно у самой картинки.

Попробовал ваш вариант:

<div style="-moz-border-radius: 16px; background: #ccc; border: 1px solid red; overflow: hidden; display: block;">
<img src="sample.jpg" style="">
</div>

не помогло, картина та же.

[Softlink]

denisator, надо скруглять и див и картинку. Все будет работать без overflow. И, если мне не изменяет память, overflow в этом случае и не действует совсем. В любом другом - да, но не с картинкой.

[Svatov]

Короче, скачал, потестил в FF 3.5.1, действительно ничего из вышеприведенного не работает.

[denisator]

  On 4/22/2012 at 5:16 PM, Svatov said:

Короче, скачал, потестил в FF 3.5.1, действительно ничего из вышеприведенного не работает.

Да ну и хрен с ним :-) динозавры будут лицезреть острые уголки :-)

Кстати, а никто случаем не знает ссылки на актуальную статистику интернет-пользователей с разбивкой по разным версиям браузеров?

[NeoXidizer]

http://www.liveinternet.ru/stat/ru/browsers.html?period=month

http://www.w3schools.com/browsers/browsers_stats.asp

http://gs.statcounter.com/

[denisator]

  On 4/22/2012 at 6:05 PM, NeoXidizer said:

http://www.liveinternet.ru/stat/ru/browsers.html?period=month

http://www.w3schools.com/browsers/browsers_stats.asp

http://gs.statcounter.com/

Спасибо. Как оказалось наглядней всего показывает яндекс-метрика :-)

[NeoXidizer]

показывает может быть и наглядно, но только для вашего сайта

а если нужно посмотреть, как дела обстоят, например, с IE6-8 в России в целом, то эти данные вполне объективные (все таки 3 разных источника)

[denisator]

  On 4/22/2012 at 6:18 PM, NeoXidizer said:

показывает может быть и наглядно, но только для вашего сайта

а если нужно посмотреть, как дела обстоят, например, с IE6-8 в России в целом, то эти данные вполне объективные (все таки 3 разных источника)

Ну В общем если прикинуть на глаз, то моих закруглённых уголков не увидит примерно 10-12% пользователей.

[NeoXidizer]

http://habrahabr.ru/post/129313/

вспомнил эту статью

часть 2 http://habrahabr.ru/post/137569/

[denisator]

  On 4/22/2012 at 6:37 PM, NeoXidizer said:

http://habrahabr.ru/post/129313/

вспомнил эту статью

часть 2 http://habrahabr.ru/post/137569/

Ох спасибо! Клёвая статья. Наверное заюзаю внутренние тени из неё.

Однако моя проблема решается в этой статье именно тем способом которого я хотел избежать - засунуть картинку в фон блока.

upd: похоже если я хочу юзать внутреннюю тень то без засовывания картинки в фон не обойтись :-(

Edited April 22, 2012 by denisator

[Softlink]

  On 4/22/2012 at 5:16 PM, Svatov said:

Короче, скачал, потестил в FF 3.5.1, действительно ничего из вышеприведенного не работает.

Хм, а с какой версии ФФ скругляет методом обертка+картинка? Знаю, что раньше точно так было, но с тех пор, как фф перешел на частую смену версий, успел позабыть.

[denisator]

  On 4/22/2012 at 7:11 PM, Softlink said:

  On 4/22/2012 at 5:16 PM, Svatov said:

Короче, скачал, потестил в FF 3.5.1, действительно ничего из вышеприведенного не работает.

Хм, а с какой версии ФФ скругляет методом обертка+картинка? Знаю, что раньше точно так было, но с тех пор, как фф перешел на частую смену версий, успел позабыть.

Про ФФ не знаю, но судя по коментам на хабре такая-же проблема существует для Оперы до 11.6 версии.