Opera 歌剧中的边界半径错误

不久前，我为自己做了一个小页面，我偶然发现了一个错误，A一直无法回答

打开时，您会在左侧和右侧看到导航箭头。这些完全是CSS制作的。现在我想走另一条路，但已经完成了，我坚持下去：）

在我测试的每个浏览器中，箭头看起来都是应该的。唯一的例外是歌剧。Opera以一种我从未见过的方式呈现箭头。有人能解释那里发生了什么吗？我很快发现Opera在箭头的边界半径属性方面存在一些问题，但有人能提供更精确的信息吗？这种行为太奇怪了

编辑： 越来越奇怪了。最初我认为，我的CSS与边界半径的结合某种程度上触发了这个问题，但问题是边界半径。当边界宽度与它组合时，它会变得更强烈。 请参阅以下jsfiddles：

I:（一切都如你所料）

关键规则：

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

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

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

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

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

二：（歌剧中的第一个小问题）

关键规则：

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

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

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

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

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

三：（从这里开始，歌剧中的渲染变得可笑）

关键规则：

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

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

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

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

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

四:

关键规则：

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

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

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

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

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

五:

关键规则：

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

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

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

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

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

奇怪。 非常奇怪

编辑2：

---

我刚刚就此事联系了Opera，因为我怀疑除了“Opera Bug”之外没有其他答案。。。当我得到令人满意的答案时，我会不断更新此页面：）

这些看起来确实很有趣的工件；）你正在使用一个css技巧，0维和边框填充所有空间。只有这样，边界半径才会出现问题。在大多数场景中，边框半径本身在opera中工作良好，即使是非常厚的边框，也可以是0边框和一种颜色。 但我知道我们都喜欢这种肮脏的小把戏，而且歌剧很有趣

所以，这里有一个更适合歌剧的方法，但它也不是完美的。歌剧真的很烂/

Html:

---

好消息是opera将停止开发自己的渲染引擎，并开始使用webkit。因此，您的箭头问题将通过operas future updates中的一个自动解决^^ ^

对于交叉浏览器行为，如何为您的div边界半径提供字符串

 .arrow {
    border-radius: 30px;
    -o-border-radius: 30px;  //for Opera
    -webkit-border-radius: 30px; // for Chrome, Safari
    -moz-border-radius: 30px; // for Mozilla
    border-style: solid;
    cursor: pointer;
    height: 0;
    margin: 0 0 -15px 50px;
    width: 0;
  }

---

好的，正式结束这个问题：不久前Opera发布了一个不再有这些问题的版本。所以，很明显，这是歌剧中的一个错误，他们修复了它。问题结束：）

opera的使用率约为2%。我不会太担心。或者只是把它们换成图片。不应该那么难。那是我见过的最好看的虫子D@btevfik这两个信息对我来说都不是新鲜事。我在这里寻求知识；）为什么会这样？这真是太奇怪了…@Hurtz伙计我刚下载了opera看看它是什么样子。真奇怪。但也不是特别糟糕。我也想知道发生了什么。该死的，老兄，我想要这样的箭头，但在所有浏览器中：D“…并开始使用webkit”。不太好；-），他们开始使用和开发（作为谷歌的支持者）Blink，这是webkit的一个分支，但我想很快就会变得非常不同。。。！但是仍然有希望这个特定的bug会消失，其他一些bug也会消失；）我看不出这对我有什么帮助。供应商前缀用于不支持w3c样式的浏览器。为了发现bug，opera必须解释边界半径，否则它将完全忽略样式。但除此之外，我发现现在的歌剧不再有这种缺陷了。可以说，它已经修复了自己：）