HTML仅在Firefox上进行不同的渲染

Question

我发现HTML渲染似乎有些错误，仅来自Firefox（实际上是Firefox版本27）。

Chrome，Safari，Opera，Internet Explorer甚至I.E.8 *正确呈现此HTML： http://jsfiddle.net/Totjoss/eMB69/4/

* 即使其他地方的I.E.8错误。

正如此示例中所述，TEST和TEST2必须锚定到蓝色区域，就像这个Chrome示例渲染一样： 并且Firefox根据它的相关性不会放置TEST和TEST2：

另外，绿色区域必须隐藏TEST和TEST2 - 因为蓝色区域的样式中有overflow:hidden。

当显示父母（display:table和display:table-cell）时，Firefox似乎做错了。 请参阅JSFiddle以查看HTML结构。

这是一个应该报告的错误吗？

虽然有一个解决方案：只用另一个div position:relative包围蓝色区域内容并且它是固定的，但它非常烦人且没用。

P.S。 ：编辑标题。

Answer 1

我发现这很有趣，但也很奇怪！

也许不知道你想要做什么的全部理由。但是让divs渲染为tables，然后尝试让它们再次呈现为divs（ position relative et all ），只是要求跨浏览器/设备麻烦。

我放弃了搜索CSS'投入'以解决问题（可能有一个） - 即使有，也不会对你感到“错误”/

很难在这里给出答案，我认为你也已经开始回答了，所以我的答案就是。

  

将内容元素与内容元素分开。

无论我们想要做什么 - 尝试格式化内容/文本（从table-cell可能获得的垂直对齐好处）应该使用布局元素中的包装器来完成 - 只是要坚实安全。

抱歉希望有帮助！也许css'修复'会被发布

Answer 2

TL; DR ：将div#right更改为position:absolute;height:100%，它看起来就像是非firefox示例。

---

在firefox的示例呈现中，div#test和div#test2离开了左边，因为他们的父div#right被设置为display:table-cell和{{1}的样式}。问题是，

  

position:relative对position:relative元素的影响尚未定义    - MDN

所以基本上，webkit选择做一件事而Gecko做另一回事。根据规范，两者都没有错，因为规范没有定义正确的答案。

但是，如果您更改为table-*，孩子们会按照您的预期定位自己。

更一般地说，我建议using flexbox if you are able to。它更适合我认为你想做的事情。