15

不久前，我为自己做了一个小页面，我偶然发现了一个从那以后无法回答的错误。

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

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

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

我： http: //jsfiddle.net/62ujn/（一切都按预期呈现）

关键规则：

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

二： 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;

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

关键规则：

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

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

关键规则：

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

奇怪的。非常。奇怪的。

编辑2：

我刚刚联系了 Opera，因为我怀疑除了“Opera-Bug”之外没有其他答案......当我得到满意的答案时，我会更新这个页面:)

4

4 回答 4

2 
.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;
       }
于 2013-11-28T10:00:10.897 回答
1

为您的 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;
  }
于 2013-09-24T10:23:10.733 回答
1

好的，正式结束这个问题：前段时间 Opera 发布了一个不再存在这些问题的版本。所以，很明显，这是 Opera 中的一个错误，他们修复了它。问题结束:)

于 2014-06-24T18:11:16.500 回答
0

这些确实是看起来很有趣的工件；）您正在使用具有 0 尺寸和边界填充所有空间的 css 技巧。只有这会导致与边界半径相结合的问题。在大多数情况下，边框半径本身在歌剧中都可以正常工作，即使边框非常厚Fiddle-Example以及在 0-border 和一种颜色的情况下也是如此。但我知道我们都喜欢这个肮脏的小把戏，而歌剧是一个有趣的终结者。

因此，这是您的导航箭头的替代版本，它与歌剧效果更好，但也不完美。歌剧真的很烂；/

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。因此，您的箭头问题将通过歌剧未来更新之一自动解决^^

于 2013-04-05T12:27:37.847 回答