Ошибка радиуса границы CSS в Chrome с процентами

Question

Привет У меня проблемы с хромом.Я думаю, что это может быть ошибка, но я не могу найти много информации об этом.В основном я хочу применить радиус границы на изображение.Граница-радиус будет 50%, образуя круг.Причина, по которой я установил его как%, заключается в том, что я не буду знать, насколько широка ширина / высота изображения.

Есть идеи, почему Chrome не отображает границы?Я не тестировал в FF <4., но FF4 работает хорошо, как и IE для изменения </p>

Answer 1

Webkit в настоящее время не обрезает углы изображений. Удалите тег src с изображения, и вы увидите, что граница правильно закруглена.

Одним из способов решения этой проблемы является установка свойства background-image в css: http://jsfiddle.net/tEzwJ/

Answer 2

Что вы пытаетесь сделать? Вы хотите, чтобы за изображением появился круг? Это то, что я вижу в FF. В Chrome круг обрезает края изображения.

Согласно спецификации - http://www.w3.org/TR/css3-background/#corner-clipping - содержимое должно быть усечено.

Содержание заменяемых элементов всегда обрезается до края содержимого кривая.

Что для меня означает, что Chrome правильно следует спецификации на этом.

Answer 3

Я нашел способ обойти это, добавив границу и границу-радиус на родителя. Затем я применил радиус границы к изображению тоже. Хотя есть небольшой разрыв. Теперь он работает в Chrome. Я не проверял это в FF3.6. Но FF4 показывает тот же результат