若嵌套div的位置延伸到外部，Firefox会放大边框

Question

我正在努力解决WebKit和Firefox之间的差异：如果一个div(B)嵌套在另一个(A)中(两者都具有CSS绝对位置)，但B在几何上位于A之外。WebKit和IExplorer都需要这样的外观：

|---------------|           Desired !! (Webkit,IExplorer)
|A              |
|               |
|            |--|------|
|            |B |      | 
|            |  |      | 
|            |--|------|
|               |
|---------------|

即Chrome：显示A外的B，两者都具有预期的边界大小

但是Firefox：放大了A的边界。

|-----------------------|      Firefox,  why ... ???
|A                      |
|                       |
|            |---------||
|            |B        || 
|            |         || 
|            |---------||
|                       |
|-----------------------|

如何强制Firefox像Chrome/Safari(和IExplorer)一样工作？看看https://jsfiddle.net/r29knz8z/4/

这是Firefox的bug吗？

Answer 1

您的案例中的问题似乎是CSS属性outline。如果您删除它并以其他方式(border、background-color或类似的方式)标记框，那么您的示例也会在Firefox中正确显示。

根据这篇文章，尽管Firefox已经有几年的历史了，但它在outline方面存在问题。因此，考虑在代码中替换它可能是个好主意。