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

Question

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

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

http://jsfiddle.net/KrCs4/

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

Webkit 截图：

火狐截图：

编辑：

已确认这是一个错误，这里有一个解决方法：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 及以下版本将围绕超出其边界的元素内容而不是围绕元素的实际设置尺寸绘制轮廓。

这将继续影响所有版本的 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>