了解显示:table-cell; 功能

Question

请注意,我并非尝试解决任何特定问题,而是试图了解 导致此问题的原因.

我已经设置了width,height和display一些div的,但是高度/宽度设置没有被兑现.该文本也被推向下方.

http://jsfiddle.net/k7esv/

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

2)为什么宽度/高度设置不受尊重？

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

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

Answer 1

1)这似乎是Firefox特有的渲染问题.vertical-align在div上设置属性可以修复它.top,middle或者bottom所有似乎都有效.当有一个height但没有vertical-align设定时,我不明白FF正在做什么; 这可能是一个错误.

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

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

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