CSS边框半径不在Webkit上修剪图像

Question

在使用chrome而不是firefox或ie9时,我无法弄清楚为什么border-radius从我的#screen元素消失了？

我为每个浏览器添加了所有不同的前缀以及标准border-radius:

www.cenquizqui.com

包含图片的上部内容框,称为#screen

屏幕css的复制粘贴:

#screen {background: none repeat scroll 0 0 #EEEEEE;
    display: block;
    height: 300px;
    position: relative;
    width: 960px;
    overflow:hidden;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;}

是因为chrome无法正确处理图像的"修剪"？我认为只有在圆角容器内部有实际标签时才会出现问题,而不是通过css将img称为background-image.

关心G.Campos

Answer 1

这是一个解决方法,将修复当前的chrome bug:

.element-that-holds-pictures {
   perspective: 1px; /* any non-zero value will work */
}

这根本不会影响显示(与opacity:0.99解决方法不同- 顺便说一句,这也是很好的解决方法).

Answer 2

Webkit无法处理儿童和孙子+的边界半径裁剪.这很糟糕.如果您想要边框裁剪,则必须直接在div上放置图像,而不要在层次结构中更深入.