CSS“纲要”上的Webkit和壁虎不同的行为表现CSS“纲要”上的Webkit和壁虎不同的行为表现

我工作的一个实验：我发现，“纲要” CSS2属性没有实现Webkit的＆壁虎同样的方式

在下面的脚本，我还有一个DIV内的绝对位置股利，但它的浮动之外。 Webkit的轮廓勾勒出实际父DIV而在壁虎，它扩展为覆盖子项。

http://jsfiddle.net/KrCs4/

我错过了什么？ 是否有我需要覆盖在壁虎的属性？ 或者它应该被报告为错误？

Webkit的截图：

Firefox的截图：

编辑：

它证实是一个错误，这里有一个解决方法： http://jsfiddle.net/7Vfee/ （你需要确保父定位：相对或绝对的此解决办法工作。

Answer 1:

壁虎的这种不一致的行为是众所周知的，并且相当充分的记录，但奇怪的是没有MDN但在SitePoint参考 ：

火狐直至并包括3.5版将画出轮廓轮廓周围已溢出其边界，而不是围绕元件实际设定的尺寸元素的内容。

这将继续影响到Firefox中的所有版本。 我没有看到它一个可行的解决办法，此刻，除了删除您绝对定位div从其父，并把它相对于...别的东西。

Answer 2:

我有同样的问题，所以我换它使用大纲使用的box-shadow：

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

代替

outline:1px #dcdcdc solid;

文章来源: CSS “outline” different behavior behavior on Webkit & Gecko