css – 了解显示：table-cell;功能

请注意，我不是想解决任何具体问题，而是试图了解导致此问题的原因。

我已经设置了一些div的宽度，高度和显示，但是高/宽设置没有被兑现。文本也被向下推。

http://jsfiddle.net/k7esv/

1)为什么当在table-row中设置height时，向下推文本，但当高度被移除时，它会将文本放在顶部？

2)为什么宽度/高度设置不能兑现？

3)为什么不设置保证金属性对它们有影响？

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

解决方法

1)这似乎是Firefox特有的渲染问题。设置div上的vertical-align属性会修复它。顶部，中间或底部都似乎工作。当没有高度但没有垂直排列时，我不明白FF在做什么？这可能是一个错误。

2)宽度和高度都得到尊重，但它们受制表规则的约束。当表格没有足够的空间给每个单元格指定的宽度时，它将为具有更多内容的单元格提供更多的空间。这是你的例子发生了什么。如果你看下面我的例子，你将会看到，当父元素比表格单元格的宽度总和宽时，单元格会尊重宽度。高度应该始终有效(除了在上述FF渲染问题的情况下)。

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

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

原文地址：https://www.jb51.cc/css/219618.html