Overflow: скрытые работы в Firefox, но не в Chrome. Зачем?

Я пытался немного поиграть с CSS3 и создать логотип Netscape исключительно из CSS3 для обучения.

Вот ссылка:

Дело в том, что в Firefox все выглядит хорошо, но в Chrome что-то идет не так. Я предполагаю, что это overflow:hidden у меня есть - в Firefox это работает, но Chrome, похоже, не делает его хорошо.

Любые предложения по поводу того, что может быть проблемой?

Ответы

Ответ 1

Я подробно описал эту проблему здесь: http://tech.bluesmoon.info/2011/04/overflowhidden-border-radius-and.html

В частности, вас поражает https://bugs.webkit.org/show_bug.cgi?id=50072

Проблема также появляется в Safari.

Ответ 2

Вы можете решить эту проблему, если не используете относительное позиционирование. Попробуйте избавиться от свойства "position: absolute" CSS и вместо этого используйте отрицательные поля (например, в вашем случае, например: "margin: -204px 0 0 -475px;" ).

Обратите внимание, однако, что вам придется как-то компенсировать порядок заказа товара (у вас больше нет контроля над z-index, но вам это нужно).

Ответ 3

У меня была такая же проблема в Chrome на компьютере под управлением Windows, img в div, с переполнением: скрытый в div. На Mac все было хорошо, но Windows Chrome игнорировал переполнение: скрытое. Мое решение: -webkit-transform: scale (1); на img (ребенок).