前一段时间我为自己制作了一个小页面,我偶然发现了一个错误,此后一直无法回答。
打开时http://darngoodpictures.com/#showme您会在左侧和右侧看到导航箭头。这些完全是 CSS 制作的。现在我会走另一条路,但它已经完成了,我会坚持下去:)
在我测试的每个浏览器中,箭头看起来都应该如此。唯一的异常(exception)是歌剧。 Opera 以我以前从未见过的方式呈现箭头。谁能解释那里发生了什么?我很快发现 Opera 在箭头的 border-radius-property 方面存在一些问题,但是谁能提供更准确的信息?这种行为太奇怪了......
编辑: 越来越奇怪了。最初我认为,我的 CSS 结合 border-radius 以某种方式触发了这个问题,但问题是 border-radius。当 border-width 与它结合时,它会得到加强。 请参阅以下 jsfiddles:
我:http://jsfiddle.net/62ujn/ (一切都按预期呈现)
主要规则:
border-radius: 0;
border-width: 200px;
二:http://jsfiddle.net/62ujn/1/ (Opera 中的第一个小问题)
主要规则:
border-radius: 50px;
border-width: 200px;
三:http://jsfiddle.net/62ujn/2/ (从这里开始,Opera 中的渲染就变得荒谬了)
主要规则:
border-radius: 50px;
border-width: 200px 150px;
四: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;
}
关于opera - Opera 中的边界半径错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15730902/