9

有人知道更多关于 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 父级在下方！）。

谷歌搜索只给出“Opera 9.5+ CSS bug：在绝对定位上渲染轮廓”链接，但它不想打开。

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

4

5 回答 5

5

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

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

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

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

于 2011-06-21T18:39:02.150 回答
3

这不是错误！

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

使用轮廓属性创建的轮廓是在框“上方”绘制的，即轮廓始终位于顶部，并且不影响框或任何其他框的位置或大小。因此，显示或抑制轮廓不会导致回流或溢出。

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

于 2011-10-31T18:48:15.980 回答
1

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

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

于 2011-03-29T17:26:44.887 回答
0

第一：我看到很多谈话，没有聪明的答案。

第二：opera 中的 outline 属性似乎有一个正的 Z-Index，并且位于所有其他 Z-Index 之上。

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

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

我在这一点上看到的唯一修复是一个浏览器 ID 脚本，它删除了 Opera 浏览器的大纲属性。

于 2013-08-04T14:37:08.930 回答
-1

是的，这是一个错误！

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

因此，没有任何地方规定轮廓应该位于其他框的顶部。边界不这样做！将轮廓绘制在自己的框上方是可以的，但仅此而已。上面另一个具有更高 z-index 的框，它不应该是可见的。

我什至不能很好地在带有轮廓的 div 上显示一个浮动弹出窗口，它会发光！这是完全错误的。没有其他浏览器会这样做。

于 2012-02-02T08:29:54.387 回答