css – 在Opera中的border-radius错误

前一段时间,我为自己做了一个小页面,我偶然发现一个由于无法回答的错误.

打开http://darngoodpictures.com/#showme时,您会看到左侧和右侧的导航箭头.这些都是完全CSS制作的.现在我会去另一种方式,但它已经完成了,我坚持下去:)

在我测试的每个浏览器中,箭头看起来应该是这样.唯一的例外是Opera.歌剧以我从未见过的方式渲染箭头.任何人都可以解释那里发生了什么？我很快就发现,Opera与箭头的border-radius属性有一些问题,但是任何人都可以提供更精确的信息吗？这个行为是如此奇怪？

编辑：
它越来越凶狠了.原来我以为,我的CSS与border-radius的组合有点触发了这个问题,但是问题是边界半径.当边框宽度与之结合时,它会变得更加激烈.
请参阅以下jsfiddles：

我：http://jsfiddle.net/62ujn/(一切都可以预期)

主要规则：

border-radius: 0;
border-width: 200px;

II：http://jsfiddle.net/62ujn/1/(Opera的第一个小问题)

主要规则：

border-radius: 50px;
border-width: 200px;

III：http://jsfiddle.net/62ujn/2/(从这里开始,Opera中的渲染变得可笑)

主要规则：

border-radius: 50px;
border-width: 200px 150px;

IV：http://jsfiddle.net/62ujn/3/

主要规则：

border-radius: 50px;
border-width: 200px 150px 100px;

V：http://jsfiddle.net/62ujn/4/

主要规则：

border-radius: 50px;
border-width: 200px 150px 100px 50px;

奇怪.
非常.奇怪.

编辑2：

我刚刚联系了Opera,因为我怀疑没有其他答案比“Opera-Bug”…我会保持这个页面更新当我得到一个答案满足:)

解决方法

.round { 
       -o-border-radius topleft: 30px;  **//for Opera and Iphone5 Mobile**
       -o-border-radius topright: 30px;
       -o-border-radius bottomleft: 30px;
       -o-border-radius bottomright: 30px;
       }

原文地址：https://www.jb51.cc/css/217106.html