Opera 轮廓渲染错误？

Question

有谁知道更多关于 Opera 大纲错误的信息吗？

看看这个：

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，我已经检查了两台具有不同 Opera 版本的不同机器，它们都将其呈现为：

那是什么？在任何 FF/Safari/Chrome 中，轮廓都位于灰色区域下方，但在 Opera 中，它仍然位于上方（即使 div 父级位于下方！）。

Google 搜索仅提供“Opera 9.5+ CSS bug：在绝对定位上渲染轮廓”链接，但它不想打开。

有临时修复吗？或者也许我是盲目的并且在某个地方犯了一个可怕的错误？

Answer 1

这更多的是 Opera 中缺少的规范而不是错误。 bug 构成了不按照规范工作的东西，Opera 根据步骤 10 遵循 W3 标准 - http ://www.w3.org/TR/CSS21/zindex.html）

这是 Opera 中缺少的规范，因为无法在最后绘制的块（即“轮廓”）上方设置样式。

当我们可以使用边框或框阴影时，不使用轮廓可能符合我们的最大利益，但就我而言，我不能这样做，因为我有一个工具提示，成千上万的人可以独立加载到他们的网站上。我没有能力改变每个人的模板样式，我也不想这样做。

我已向 Opera 提交了错误报告 (DSK-339836)。希望他们能给我们一种在最后绘制的东西（即轮廓）之上绘制东西的方法

Answer 2

这不是一个错误！

http://www.w3.org/TR/CSS21/ui.html #动态轮廓

使用轮廓属性创建的轮廓绘制在一个框的“上方”，
即轮廓总是在最上面，并且不影响
盒子或任何其他盒子的位置或大小。所以，
显示或抑制轮廓不会导致回流或溢出。

轮廓不应该是“只是另一个边界”属性。它更需要围绕某些元素进行调试或创建可视化 UI 提示。

Answer 3

这本身并不是一个“错误”，而是规范实施方式的差异。轮廓突出显示了框的边缘。就是这样。它不应该被用作边界。如果仔细观察，您会发现只有红色轮廓与另一个框重叠，但深色边框却没有。

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

Answer 4

第一：我看到了很多讨论，但没有明智的答案。

其次：歌剧中的轮廓属性似乎具有正的 Z 索引，并且位于所有其他 Z 索引之上。

第三：我来寻找解决方案或解决方案，但得到的却是垃圾和意见，而我们都知道意见是什么样的。

我认为这是一个浏览器代码问题，它将轮廓与元素分开，并赋予它高于其他一切的正 Z 索引。我尝试过的所有其他浏览器都工作正常，包括移动浏览器，但 Opera 除外。
我曾经很喜欢 Opera 作为移动浏览器，但现在发现它的缺点比其他任何浏览器都多。

我目前看到的唯一修复是浏览器 ID 脚本，它删除了 Opera 浏览器的大纲属性。

Answer 5

是的，这是一个错误！

CSS 2.1 轮廓与边框在以下方面有所不同：
轮廓不占用空间。
轮廓可以是非矩形的。

因此，它没有指出轮廓应该位于其他框的顶部。边界不这样做！轮廓画在它自己的盒子上方是可以的，但仅此而已。上面的另一个盒子具有更高的 z-index，它不应该是可见的。

我什至无法在带有轮廓的 div 上很好地显示浮动弹出窗口，但它却闪闪发光！这是完全错误的。没有其他浏览器能做到这一点。