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/

请参阅以下相关问题：

Answer 2

尝试给子元素一个border-radius一半的父元素。

从这个回答：https://stackoverflow.com/a/5421789/187954

Answer 3

只需加入

    .wrapper:first-child{
    border-radius:20px;
    }

您必须根据边框厚度调整半径，并将其从孩子身上取下。我还会为旧的支持浏览器添加前缀-moz-等。

Answer 4

将display: block;或display: inline-block;添加到父元素可以解决它。

Chrome不尊重儿童的边界半径

4 个答案: