HTML 仅在 Firefox 上的不同呈现答案

【问题标题】：HTML Different rendering on Firefox onlyHTML 仅在 Firefox 上的不同呈现
【发布时间】：2014-03-08 07:48:12
【问题描述】：

我发现 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。

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

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

虽然有一个解决方案：只需将蓝色区域内容与另一个 div 包围，即 position:relative 并且它已修复，但它非常烦人且无用。

附注: 编辑标题。

【问题讨论】：

标签： html css firefox

【解决方案1】：

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

在 Firefox 对您的示例的渲染中，div#test 和 div#test2 位于左侧，因为它们的父级 div#right 的样式同时为 display:table-cell 和 position:relative。问题是，

position:relative 对table-* 元素的影响未定义。
——MDN

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

但是，如果您更改为 position:absolute，孩子们将按照您的预期定位自己。

更一般地说，我建议using flexbox if you are able to。它更适合我认为您正在尝试做的事情。

【讨论】：

我已将#right 设置为position:absolute;height:100%，但现在它已扩散到整个页面并且不关心#left，因此它并不是真正的解决方案。不过感谢您的 MDN 链接！（对不起@Rob Sedgwick，这篇文章更好地回答了我的问题。：P 但它仍然很有趣。）
啊，对不起，我可能有点过火了。更改为 position:absolute 与 display:table-cell 冲突。（参见jsfiddle.net/eMB69/6 并检查#right。）
好吧，你是对的！实际上它没有用，因为我将top:0;left:0 规则留在了abs 类中，尽管我应该删除它。太好了，谢谢！

【解决方案2】：

我觉得这很有趣，但也很奇怪！

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

我放弃了寻找 CSS 'throw in' 来解决问题（可能有一个）——即使有，你不会觉得“错误”吗/

这里很难给出答案，我想你也开始回答了，所以我的答案是。

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

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

抱歉，希望对您有所帮助！也许 css 'fix' 会被发布

【讨论】：

在我看来，这个棘手的表格 HTML 不仅是居中文本的最佳方式，而且是居中布局以及灵活的内联元素的最佳方式（如果块是 display:inline-block 可能不起作用大于计算值）。只要给布局一个类，孩子们就会把里面的任何 HTML 元素居中。而且我认为没有更好的方法可以垂直居中没有固定height 的元素，这些元素可用于计算边距或相对顶部。对于跨浏览器/设备的问题，它也适用于 iOS 和 Android。 ;) 只有 Firefox 做错了。
查看此线程stackoverflow.com/questions/17526370/… - 从中得出的结论是，没有为 display:table 元素定义位置。拿走你的左、右、顶元素，你会看到
您仍然可以使用带有 display inline:block 和 then 标记的 div 创建布局，您可以在其中列出类似元素的表格（表格用于标记内容，为什么在你不需要）（这是我的想法）
有趣的是，你可以做相反的事情并将其标记为实际的<table>，然后设置td { display:block; }，看看可能有什么乐趣/好处-（现在我只是漫无目的）我喜欢你的问题，我从来没有考虑过在表格元素上设置位置。
我不同意你的<table> 想法。 ;) 因为它在语法上是完全错误的：表格仅用于显示的列和键/值行（如 Excel），不得用于布局。例如，如果您的网站被 Google 分析，机器人会认为您在表格中显示信息，但您正在布局各种 HTML 内容。虽然，<table> 和 display:table 在语法上不同，但显示相同。 display:table（以及所有其他）的存在是为了避免人们使用 <table> 作为居中 HTML 内容的一种方式。