CSS“概述”Webkit上的不同行为行为壁虎

Question

我正在做一个实验＆amp;我发现“大纲”CSS2属性在Webkit＆amp;壁虎

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

http://jsfiddle.net/KrCs4/

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

Webkit截图：

Firefox屏幕截图：

编辑：

已确认这是一个错误，这是一个解决方法：http://jsfiddle.net/7Vfee/（您需要确保父级已定位：相对或绝对，以便此解决方法起作用。

Answer 1

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

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

而不是

outline:1px #dcdcdc solid;

Answer 2

Gecko的这种不一致的行为是众所周知的，并且有充分的文档证明，虽然奇怪的是不是在MDN而是在SitePoint Reference：

  

Firefox 3.5（包括版本3.5）将围绕元素内容绘制轮廓线，该元素溢出其边界而不是元素的实际设置尺寸。

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

Answer 3

我已使用以下绝对位置进行了固定：

transform: translate(x,y);

.outer {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 50px;
    width: 100px;
    background: blue;
    border: 3px solid green;
    outline: 3px dotted red;
}
.inner {
    position: absolute;
    transform: translate(80px, 15px);
    width: 40px;
    height: 20px;
    background: yellow;
}

<div class="outer">
    <div class="inner">
    </div>
</div>