歌剧，边界半径和溢出：隐藏答案

【问题标题】：Opera, border-radius and overflow:hidden歌剧，边界半径和溢出：隐藏
【发布时间】：2014-03-25 20:52:03
【问题描述】：

我有以下问题：jsfiddle。

从示例中可以看出，Opera（12.16 版）不会裁剪位于 div 内的图像的边框。它返回一个带圆角的 div，但无法隐藏溢出的图像角。在其他浏览器中没有这样的问题。我的代码：

<div style="overflow:hidden; border-radius:200px; width:200px; height:200px; border:1px solid black;">
    <img src="http://www.blogcdn.com/www.autoblog.com/media/2012/06/lamborghini-aventador-f16-fighting-falcon.jpg" style=" width:200px; height:200px; ">
</div>

有没有办法解决这个问题？

【问题讨论】：

感谢@Aleks G 的编辑。

标签： css cross-browser rounded-corners

【解决方案1】：

这是一个错误，在 Opera 12.16 及更低版本中无法将图像的角包裹在 wrapper div 中。

可以通过给父（包装器）div相对定位，将图像附加为背景图像并使用其顶部和左侧坐标定位来解决。

如果图像很大，则应使用其背景大小属性调整其大小。

这里是更新的 jsfiddle 链接：jsfiddle

<div style="position:relative; overflow:hidden; border-radius:200px; width:200px; height:200px; border:1px solid black; background-image:url(http://www.blogcdn.com/www.autoblog.com/media/2012/06/lamborghini-aventador-f16-fighting-falcon.jpg); background-size:200px 200px;"></div>

【讨论】：

【解决方案2】：

是的。升级到基于 Google Chromium 的 Opera 17，例如。与 Chrome 相同。这应该使渲染类似于 Chrome 和其他浏览器。

【讨论】：

非常聪明。并告诉互联网上的所有歌剧用户也这样做。
是吗？不是常青树（=自动更新）的浏览器是邪恶的……而且，如果你看一下市场份额，Opera 真的非常非常小。那么，为什么还要费心支持它的过时版本呢？我真的不明白为什么拒绝投票是合理的......
想象你正在工作中的一个项目，当一个错误报告给你时，你的反应是，“哦，我不在乎它，因为它没那么重要。”你在那里的任期会持续多久？
感谢您的回复 Per Lundberg。但是，@Aleks G 是正确的。我不能让所有 Opera 用户都将他们的浏览器更新到最新版本的 Opera。如果我没记错的话，Opera 从 10.50 版本开始支持border-radius 属性。这意味着它还应该能够对包装器 div 内的任何内容的角进行圆角处理。所以想看看有没有办法解决这个问题。
所有，这不仅仅是一个歌剧问题。这是一个 webkit 问题。影响任何使用 webkit 的浏览器：opera、dolphin、safari、android 默认：stackoverflow.com/questions/8705249/…

【解决方案3】：

如果合适的话，将border-radius直接添加到<img>标签样式中。

【讨论】：

不，在我的测试页面中，该图像以及包装 div 具有绝对定位。此外，图像没有包装 div 的大小。它比父 div 大。