Firefox 放大边框如果嵌套 div 如果位置延伸到外面

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 的错误吗？

Answer 1

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

根据 this article，虽然 Firefox 已经有几年历史了，但在 outline 中存在问题。因此，考虑在您的代码中替换它可能是个好主意。

Firefox 放大边框如果嵌套 div 如果位置延伸到外面

Firefox enlarges border if nested div if position extends outside

html

css

firefox