问题
Please see the following JSFiddle:
http://jsfiddle.net/zScKW/
Notice that the child div clips the border of its parent. If I remove the border (but keep the rounded corners), the item clips as we would expect. Firefox 4 renders this markup as I expect, with the item clipped before the border starts. Chrome, however, does not clip the child until the border's outer edge is reached.
Who has this behavior correct, and is there a hack? I am fine with leaving it in chrome if it is a bug that will be fixed, but I will need to tweak the layout if it is rendering to spec in Chrome.
(please note before you vote to close, this is a different bug than the multiple threads about a firefox 3.5/Chrome bug which prevented items from being clipped at all by rounded borders)
回答1:
Give the child element a radius of half the border-radius of its parent.
border-top-left-radius: 5px;
Example here: http://jsfiddle.net/zScKW/1/
回答2:
Actually all you need to is add position:relative to the child element.
回答3:
I post related bug for it in http://code.google.com/p/chromium/issues/detail?id=99364
来源：https://stackoverflow.com/questions/5421622/chrome-children-clip-css3-rounded-border