CSS"概述"Webkit和Gecko上的不同行为行为

Question

我正在进行一项实验,我发现"大纲"CSS2属性在Webkit&Gecko上的实现方式不同

在下面的脚本中,我在另一个div中有一个绝对位置div但是在它之外浮动.Webkit上的大纲概述了在Gecko上实际的父div,它扩展为覆盖子项.

http://jsfiddle.net/KrCs4/

我错过了什么吗？我需要在Gecko上覆盖一个属性吗？还是应该报告为bug？

Webkit截图:

Firefox截图:

编辑:

它已被证实是一个错误,这是一个解决方法:http://jsfiddle.net/7Vfee/(您需要确保父级定位:相对或绝对的此解决方法才能工作.

Answer 1

我遇到了同样的问题,所以我将它与使用大纲交换使用盒子阴影:

box-shadow: 0px 0px 0px 1px #FFF;

代替

outline:1px #dcdcdc solid;

Answer 2

Gecko的这种不一致的行为是众所周知的并且已经充分记录,尽管奇怪的是不是在MDN而是在SitePoint参考:

Firefox最高版本(包括版本3.5)将围绕元素内容绘制轮廓轮廓,该元素溢出其边界而不是元素的实际设置尺寸.

这继续影响所有版本的Firefox.我目前没有看到一个可行的解决方法,除了将其绝对定位div于其父级并将其相对于......其他内容.