了解显示：table-cell;功能

Question

请注意，我并非尝试解决任何特定问题，，但试图了解导致此问题的原因。

我已设置了某些div的width，height和display，但高度/宽度设置未得到尊重。该文本也被推向了下方。

http://jsfiddle.net/k7esv/

1）为什么在表格行中设置height时向下推文本然后删除height时将文本放在顶部？

2）为什么不考虑宽度/高度设置？

3）为什么不设置margin属性对它们有任何影响？

http://jsfiddle.net/k7esv/1/

Answer 1

1）这似乎是Firefox特有的渲染问题。在div上设置vertical-align属性可以修复它。 top，middle或bottom似乎都有效。当height但没有设置vertical-align时，我不了解FF正在做什么。它可能是一个错误。

2）宽度和高度受到尊重，但它们受制于表格大小规则。当一个表没有足够的空间来为每个单元格指定它们指定的宽度时，它将为具有更多内容的单元格提供更多空间。这就是你的例子所发生的事情。如果你看下面我的例子，你会发现当父元素宽于表格单元格宽度的总和时，单元格会尊重宽度。高度应始终有效（除了上面提到的FF渲染问题）。

3）表格单元格没有边距。在父div上使用border-spacing和display：table。

http://jsfiddle.net/chad/k7esv/3/

Answer 2

我将添加（看起来似乎已经错过）在表格行中设置单个表格单元格的高度可能毫无意义，因为同一表格行中的所有单元格将与最高单元格的高度相同在上述行中。

话虽如此，当动态内容被提供给不同的单元格时，可能希望添加高度，这意味着它们的高度会发生波动。您可能希望将特定单元格设置为永远不会小于高度X，这只会在另一个特定单元格的内容较少时生效。