Opera中的border-radius错误

Question

之前，我为自己制作了一个小页面，然后遇到了一个问题，至今无法解答。

打开http://darngoodpictures.com/#showme时，你会在左右两侧看到完全由CSS制作的导航箭头。现在我会用另一种方法，但已完成，我会坚持使用它 :)

在我测试的每个浏览器中，箭头都看起来像应该的样子。唯一的例外是Opera。Opera以我从未见过的方式呈现箭头。有人能解释这是怎么回事吗？我很快就发现Opera在处理箭头的border-radius属性方面存在一些问题，但有没有人能提供更精确的信息？这种行为真是太奇怪了...

编辑： 越来越奇怪了。最初我以为我的CSS与border-radius结合触发了这个问题，但问题实际上是border-radius。当将border-width与它组合使用时，这个问题变得更加明显。 请参考以下jsfiddle：

I：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”以外没有其他答案......当我得到令人满意的回答时，我会更新这个页面 :)

- hurrtz

---

Opera只被大约2%的人使用。我不会太担心。或者你可以将它们更改为图片，这应该不难。 - btevfik

那是我见过最好看的虫子！:D - Kaloyan

该死，伙计，我想要像那样的箭头，但在所有浏览器中都能用:D - Miljan Puzović

@hurrtz，你能否将那部分（按钮）放在JSFiddle或其他地方，以便我们查看。 - btevfik

哪个版本？还是现在已经过时了？ - random

Answer 1

.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;
       }

- Piyush Marvaniya

Answer 2

尝试为您的div添加border-radius以实现跨浏览器行为。

 .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;
  }

- Anna Gabrielyan

---

我看不出那会怎么帮助我。供应商前缀是为不支持w3c样式的浏览器而设计的。为了发现错误，Opera必须解释border-radius，否则它将完全忽略该样式。 但除此之外：我已经发现当前的Opera不再有这个错误了。可以说它已经自行修复 :) - hurrtz

Answer 3

好的，为了正式结束这个问题：不久之前，Opera发布了一个不再存在这些问题的版本。因此，很明显，这是Opera中的一个错误，并且他们已经解决了它。问题关闭 :)

- hurrtz

Answer 4

这些确实是非常有趣的艺术品 ;) 你正在使用一个0维度和填充所有空间的边框css技巧。只有这种情况与边框半径结合使用时会出现问题。边框半径本身在大多数情况下在Opera中都可以正常工作，即使是非常厚的边框Fiddle-Example，也适用于0边框和单色情况。 但我知道我们都喜欢这些小技巧，而Opera则是一个有趣的阻碍者。

所以，这里有一个更好地与Opera配合的导航箭头的替代版本，但它也不完美。Opera真的很糟糕 ;/

Html:

<div>
    <div class='first'></div>
    <div class='second'></div>
</div>

<div class='mirror'>
    <div class='first'></div>
    <div class='second'></div>
</div>

CSS：

div {
    width:200px; height:100px;
    background:none;   
    position:relative;
    margin-bottom:5px;
}

.first {
    position:absolute;
    left:0; top:0;
    width:60px; height:100px;
    background:black;
    border-radius:40px 0 0 40px;
    transform:scale(0.5, 1);
    -webkit-transform:scale(0.5, 1);
    -o-transform:scale(0.5, 1);
}
.second {
    position:absolute;
    left:57px; top:0;
    width:0; height:0;
    background:none;

    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid green;
    transform:scale(1.5, 1);
    -webkit-transform:scale(1.5, 1);
    -o-transform:scale(1.5, 1);
}

.mirror { 
    transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);    
}

好消息是Opera将停止开发自己的渲染引擎，开始使用WebKit。因此，您的箭头问题将在Opera未来的更新中自动解决^^

- Hexodus

---

不是真的 ;-)，他们开始使用和开发（作为Google的支持者）Blink，这是webkit的一个分支，但我猜很快就会非常不同...！ - Netsurfer

但仍有希望，这个特定的错误将会消失，还有其他一些错误也会消失 ;) - Hexodus