前一段时间,我为自己做了一个小页面,我偶然发现一个由于无法回答的错误.
打开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;
}
