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

Question

我正在进行一项实验，我发现“大纲”CSS2 属性在 Webkit 和 Gecko 上的实现方式不同

在下面的脚本中，我在另一个 div 内有一个绝对位置 div，但在它之外浮动。 Webkit 上的大纲勾勒出实际的父 div，而在 Gecko 上，它会扩展以覆盖子项。

http://jsfiddle.net/KrCs4/

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

Webkit 截图：

火狐截图：

编辑：

已确认是一个错误，这里有一个解决方法：http://jsfiddle.net/7Vfee/（您需要确保父对象的位置：相对或绝对，此解决方法才能起作用。

Answer 1

我已经修复了使用这个而不是绝对定位：

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>

Answer 2

我遇到了同样的问题，所以我把它从使用轮廓换成使用盒子阴影：

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

而不是

outline:1px #dcdcdc solid;

Answer 3

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

Firefox 3.5 及以下版本将围绕超出其边界的元素内容而不是围绕元素的实际设置尺寸绘制轮廓。

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