Chrome - 儿童剪辑css3圆角边框？ [英] Chrome - children clip css3 rounded border?

问题描述

请参阅以下JSFiddle：

http：// jsfiddle.net/zScKW/

请注意，子div剪辑其父项的边框。如果我删除了边框（但保留了圆角），则该项目会像我们预期的那样剪切。按照我的预期，Firefox 4会呈现此标记，并在边界开始之前将项目剪切。但是，Chrome浏览器不会剪辑孩子，直到到达边框的外边。

有这种行为的人是否正确，是否存在黑客行为？如果它是一个可以修复的bug，我可以将它留在Chrome中，但是如果在Chrome中渲染规范，我需要调整布局。

（请注意，在您投票结束之前，这是一个与多个关于firefox 3.5 / Chrome bug的多线程不同的错误，它可以防止项目被圆形边框限制）

子元素元素添加一半的半径 border-radius 父母。

  border-top-left-radius：5px ; 
  

示例： http://jsfiddle.net/zScKW/1/

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)

解决方案

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/

这篇关于Chrome - 儿童剪辑css3圆角边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！