Не работает overflow:hidden в Опера (в. 11.10) и Сафари 5.1.2

[clavin]

Я столкнулся с проблемой, что браузеры Опера и Сафари некорректно работают со свойством overflow:hidden. По ссылке

код я выложил пример кода, когда внутри дива со скруглёнными с помощью border-radius бордюрами есть рисунок, который накладывается на эти бордюры. Как это можно решить?

Если быть точнее, то у меня в примере блок с классом "float-div" имеет свойство float:left;. Вот более точный код

Edited January 5, 2012 by clavin

[Gaspode]

Непонятно, а overflow: hidden в указанных примерах зачем? border-radius и сам по себе отсекает содержимое.

[SelenIT]

Сафари до предпоследней, кажись, версии не понимал border-radius без префикса -webkit-. У Оперы до последней 11.6x была известная проблема с border-radius для img, можно посмотреть пару вариантов решения.

[clavin]

Непонятно, а overflow: hidden в указанных примерах зачем? border-radius и сам по себе отсекает содержимое.

Вы откройте примеры в данных браузерах и увидите, что не отсекают.

Для Сафари подошло вот это решение:для Safari

Здесь для img тоже добавляется свойство border-radius. А в опере до сих пор не работает

[clavin]

Это что ж получается? Что Опера и Сафари не поддерживают спецификацию w3c?

[SelenIT]

Ни один браузер не поддерживает ни одну спецификацию W3C полностью. Sad but true. Да и данная спецификация еще только кандидат на утверждение.

Но справедливости ради, в Сафарях 5.1.х и Операх 11.6х дела с сабжем получше, чем в предыдущих.

Кстати, одно из решений для Сафарей (актуальных) и Хрома — заменить border на box-shadow с нулевым размытием, она там, вроде, и рисуется поаккуратнее...