Chrome不尊重儿童的边界半径

Question

我让Chrome在尊重子元素的边界半径方面遇到了一些麻烦.

这是设置:

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

如果包装器是定位元素(例如位置:相对)并且具有border-radius,则边界半径将不会应用于img内容.

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

这是一个展示问题的简化示例页面.在Safari,Mobile Safari,Firefox或IE中查看,图像的角落将被剪切到圆角.在Chrome中查看图像溢出角落(尽管溢出:隐藏的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/

请参阅以下相关问题:

• 强迫孩子在CSS中服从父母的弯曲边框
• CSS边框半径不在Webkit上修剪图像
• 如何使CSS3圆角隐藏在Chrome/Opera中溢出