Хром - детский клип css3 с закругленной границей?

Question

Пожалуйста, смотрите следующее JSFiddle:

http://jsfiddle.net/zScKW/

Обратите внимание, что дочерний элемент div обрезает границу своего родителя.Если я уберу границу (но сохраню закругленные углы), элемент обрезается, как мы и ожидали.Firefox 4 отображает эту разметку, как я и ожидал, с обрезанным элементом до начала границы.Однако Chrome не обрезает дочерний элемент до тех пор, пока не будет достигнут внешний край границы.

У кого такое поведение правильное, и есть ли взлом?Я могу оставить его в Chrome, если это будет исправлена ​​ошибка, но мне нужно настроить макет, если он выполняет рендеринг в спецификации в Chrome.

(пожалуйста, обратите внимание, прежде чем голосовать, чтобы закрыть,эта ошибка отличается от многопоточности в Firefox 3.5 / Chrome, которая вообще не позволяла обрезать элементы по закругленным границам)

Answer 1

На самом деле все, что вам нужно, это добавить position:relative к элементу child.

Answer 2

Дайте элементу child радиус, равный половине border-radius его parent.

border-top-left-radius: 5px;

.

Answer 3

Я публикую соответствующую ошибку в http://code.google.com/p/chromium/issues/detail?id=99364