google-chrome - Chrome 不支持 child 的边框半径

Question

我在让 Chrome 支持子元素的边框半径时遇到了一些麻烦。

这是设置:

<div class='wrapper'>
    <img id='sosumi' src='http://images.apple.com/safari/images/overview_hero.jpg' />
</div>

如果包装器是一个定位元素(例如 position: relative)并且有一个 border-radius，那么 border radius 将不会应用于 img 内容。

它也不一定是图像。任何填充背景的内容。

这是一个展示问题的简化示例页面。在 Safari、Mobile Safari、Firefox 或 IE 中查看，图像的 Angular 将被剪裁成圆 Angular 。在 Chrome 中查看图像溢出 Angular 落(尽管溢出:隐藏的 css)并且看起来很丑。

看看: https://dl.dropbox.com/u/433436/no-rounding/index.html

问题:有没有一些不太疯狂的解决方法？有谁知道为什么这会影响一个基于 WebKit 的浏览器而不影响其他浏览器？也许这很快就会在 Chrome 中更新？

Answer 1

您需要删除position: relative

如果您的真的需要相对位置，那么您可以对元素进行双重包装:

HTML:

<div class="outer">
    <div class="wrapper">
        <div class="inside">
        </div>
    </div>
</div>

CSS:

.outer {
    position: relative;
}
.wrapper {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 3px solid red;
    border-radius: 20px;
}
.inside {
    width: 100px;
    height: 100px;
    background-color: #333;
}

http://jsfiddle.net/eprRj/

查看这些相关问题:

• Forcing child to obey parent's curved borders in CSS
• CSS Border radius not trimming image on Webkit
• How to make CSS3 rounded corners hide overflow in Chrome/Opera