铬不尊重边界桡骨儿童

我有一些麻烦让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中更新？

来源

2012-09-19 isaiah

您需要删除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-20 04:15:44 Petah

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

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

来源

2012-09-20 04:07:12

虽然这明显解决了复杂用例的简单情况下的问题，但这并不是真的可行。在我的具体情况下，子元素不是我无法修改的用户内容。 – isaiah

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

来源

2012-09-21 14:00:08

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

来源

2016-04-13 15:13:58

铬不尊重边界桡骨儿童

回答

相关问题