Я пытался немного поиграть с CSS3 и создать логотип Netscape исключительно из CSS3 для обучения.
Вот ссылка:
http://alonbt.com/css3/netscape/
Дело в том, что в Firefox все выглядит хорошо, но в Chrome что-то идет не так. Я предполагаю, что это overflow:hidden у меня есть - в Firefox это работает, но Chrome, похоже, не делает его хорошо.
Любые предложения по поводу того, что может быть проблемой?
Я подробно описал эту проблему здесь: http://tech.bluesmoon.info/2011/04/overflowhidden-border-radius-and.html
В частности, вас поражает https://bugs.webkit.org/show_bug.cgi?id=50072
Проблема также появляется в Safari.
Вы можете решить эту проблему, если не используете относительное позиционирование. Попробуйте избавиться от свойства "position: absolute" CSS и вместо этого используйте отрицательные поля (например, в вашем случае, например: "margin: -204px 0 0 -475px;" ).
Обратите внимание, однако, что вам придется как-то компенсировать порядок заказа товара (у вас больше нет контроля над z-index, но вам это нужно).
У меня была такая же проблема в Chrome на компьютере под управлением Windows, img в div, с переполнением: скрытый в div. На Mac все было хорошо, но Windows Chrome игнорировал переполнение: скрытое. Мое решение: -webkit-transform: scale (1); на img (ребенок).