Opera轮廓渲染bug？

Question

有人了解关于Opera大纲bug的更多信息吗？

看看这个：

http://jsfiddle.net/BYgMr/

<div id="outline">TEST</div>
<div id="another-div">Another div</div>

#outline {
    border: solid 1px #000;
    outline: solid 1px red;
    background-color: #fff;
    width: 200px;
    height: 200px;
}

#another-div {
    position: absolute;
    top: 100px;
    left: 100px;
    border: solid 1px #000;
    outline: solid 1px blue;
    background-color: #eee;
    width: 200px;
    height: 200px;
    z-index: 5000; /* even this is not helping */
}

我正在使用最新版的Opera浏览器，在两台不同版本的机器上检查过，它们都呈现出相同的效果：

在任何FF / Safari / Chrome中，轮廓线都在灰色区域下方，但在Opera中仍然在上方（即使div父级远在下方！）。谷歌搜索只提供“Opera 9.5+ CSS bug：渲染轮廓线超过绝对定位”的链接，但它不想打开。有任何临时解决方案吗？或者我瞎了，做了可怕的错误吗？

- anonymous

Answer 1

这更像是Opera缺少规范而不是一个漏洞。漏洞意味着某些东西不按照规范工作，而Opera根据第10步遵循W3标准 - http://www.w3.org/TR/CSS21/zindex.html)。

在Opera中缺少一种方法来设置样式高于最后绘制的块，即“outline”，这就是它缺少规范的原因。

虽然我们最好不要使用outline，而是使用border或box-shadow，但在我的情况下，我无法这样做，因为我有一个提示框，数千人会独立地将其加载到他们的网站上。 我没有更改每个人的模板样式的奢侈，也永远不会想这么做。

我已向Opera提交了漏洞报告（DSK-339836）。希望他们能给我们一种方法来绘制高于最后绘制的东西（即轮廓）。

- yekta

Answer 2

这不是一个bug！

http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines

使用轮廓属性创建的轮廓线是“覆盖”在框上的，即轮廓线始终位于顶部，不会影响框或任何其他框的位置或大小。因此，显示或抑制轮廓线不会导致重新流动或溢出。 轮廓线不应该只是“另一个边框”属性。它更需要用于调试或创建特定元素周围的视觉 UI 提示。

- c69

Answer 3

这并不是一个“bug”，而是规范实现方式的差异。轮廓突出显示了盒子的边缘，仅此而已。它不应该被用作边框。如果你仔细看，你会发现只有红色轮廓与另一个盒子重叠，但深色边框却没有。

你使用边框和轮廓以及重叠的div有什么原因吗？这似乎是一个奇怪的用例。如果你需要同时使用两者，你可以在大多数最新的浏览器中使用box-shadow作为一种技巧来获得你想要的效果：box-shadow: 0px 0px 0px 1px red;。

- webinista

---

如果看不到盒子，突出显示它就没有意义。 - Mr. Shiny and New 安宇

实际上，如果你正在构建一个调试器并需要了解布局的情况，那么它确实会有用。但是，突出显示的重点并不是为了添加边框。我们有轮廓和边框来完成这个任务。突出显示只是为了引起对方框的注意。这就是为什么我要问为什么OP同时使用两者的原因。 - webinista

我的意思是，你的帖子说“[Opera如何实现'outline']不是一个bug”，并且即使看不见该元素，outline元素也可以被使用。我已经阅读了更多有关这个问题的信息，包括为什么Opera以这种方式实现轮廓线，但我仍然认为这没有任何意义。我认为像outline这样的CSS属性不应该只用于调试，并且我无法想象在任何情况下都需要“outlines总是在顶部”的真正用例。至于同时使用边框和轮廓线，有很多原因可能会导致这样做。我曾经使用过它，直到我遇到了这个bug。 - Mr. Shiny and New 安宇

调试器是一个示例用例。显然，这不是唯一的用例。你的用例仍然不是轮廓应该被使用的方式。 - webinista

更正：请看我的回复，这不是规范违规，而是缺少规范。 - yekta

Answer 4

首先：我看到很多讨论，但没有智慧的答案。

其次：Opera中的轮廓属性似乎具有正面的Z-Index，并始终位于所有其他Z-Indexes之上。

第三：我来寻找解决方法或处理方式，但却得到了垃圾和意见，我们都知道意见是什么样子。

我认为这是一个浏览器代码问题，将轮廓与元素分离并赋予它正面的Z-Index，高于其他所有内容。我尝试过的所有其他浏览器都可以正常工作，包括移动浏览器，除了Opera。 我曾经喜欢Opera作为移动浏览器，但现在看到的缺点比任何其他东西都要多。

目前我唯一看到的解决方法是使用浏览器ID脚本，删除Opera浏览器的轮廓属性。

- E.R.Rider

Answer 5

是的，这是一个错误！

CSS 2.1中的轮廓与边框有以下不同之处： 轮廓不占用空间。 轮廓可以是非矩形的。

因此，没有地方说明轮廓应该在其他框上方。边框不会这样做！轮廓绘制在其自身的框上方是可以的，但仅此而已。另一个具有更高z-index的框上方，它就不应该可见。

我甚至无法在具有轮廓的div上漂亮地显示浮动弹出窗口，它会透过来！这是完全错误的。没有其他浏览器像这样做。

- HenkV

---

没有任何地方说明轮廓线不应该在盒子的上面。仅仅因为浏览器做某些事情的方式不同，并不一定意味着它有缺陷。 - BoltClock