Углы изображения с использованием свойства радиуса границы в Safari / Chrome неправильно отформатированы

Question

Работая на моей домашней странице, где я перебираю некоторые изображения, используя методы jQuery fadeIn и fadeOut.

Изображения имеют границу 2 пикселя и радиус 14 пикселей.

Как видите, углы изображения перекрывают границу.

Это происходит только в Safari и Chrome, а не в Firefox и IE.

Кто-нибудь знает, почему?

Вы можете увидеть это поведение здесь:

http://www.findyourgeek.com/index-copy.php

Спасибо.

Answer 1

попробуйте удалить стиль рамки из самого изображения и добавить его в #content # topStoriesTest

#content #topStoriesTest {

    border: 1px solid #CCCCCC;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    height: 318px;
    overflow: hidden;
    position: relative;
    width: 549px;
}

Answer 2

Поддержка border-radius на изображениях в Chrome / Safari (или, скорее, в Webkit) кажется немного ошибочной

Ошибка Chrome -webkit-border-radius?- Форумы CSS-Tricks

Данный пост относится к предыдущему году (~ Chrome ver 10), когда поддержка border-radius для изображений не работала.Поддержка доступна, но вы все еще сталкиваетесь с некоторыми проблемами.Вы можете сообщить об ошибке, которую вы видите, проектам Webkit / Chrome / Safari.Я знаю, что была довольно легко найти страницу с сообщениями об ошибках для Chromium, но я не уверен насчет двух других.

Вот две идеи для обхода:

1. , которые вы можете применитьвроде хака CSS3, удалив 2px border и установив 2px штрих box-shadow (box-shadow:0 0 0 2px #606060;).Это может иметь несколько недостатков, так как это только исправление для Chrome / Safari пример jsfiddle

2. или, конечно, другой вариант - отредактировать фотографии, чтобы придать им округлостьуголки (http://www.roundpic.com/ хороший сайт для этого)