7

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

这是设置：

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

如果包装器是定位元素（例如位置：相对）并且具有边框半径，则边框半径将不会应用于 img 内容。

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

这是展示问题的简化示例页面。在 Safari、Mobile Safari、Firefox 或 IE 中查看，图像的角将被剪裁为圆角。在 Chrome 中查看图像溢出角落（尽管溢出：隐藏的 css）并且看起来很难看。

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

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

4

4 回答 4

6

您需要删除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/

请参阅以下相关问题：

于 2012-09-20T04:15:44.683 回答
0

只需添加 

    .wrapper:first-child{
    边框半径：20px；
    }
您将不得不根据边框厚度调整半径并将其从孩子身上取下。我还将为较旧的支持浏览器添加前缀 -moz- 等。

于 2012-09-21T14:00:08.270 回答
0

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

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

于 2012-09-20T04:07:12.440 回答
0

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

于 2016-04-13T15:13:58.713 回答