理解display：table-cell;功能 [英] Understanding display:table-cell; functioning

问题描述

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

我已设置一些div的 width ， height 和显示高度/宽度设置不受支持。文字也被向下推。

解决方案

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

2）宽度和高度都受到尊重，但是它们受表大小规则约束。当表没有足够的空间给每个单元格他们已经指定的宽度，它将给更多的空间，具有更多的内容的单元格。这是你的例子发生了什么。如果你看下面的例子，你会看到当父元素比表格单元格宽度的总和宽时，单元格的宽度。高度应该总是工作（除了在上面提到的FF渲染问题的情况下）。

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

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

Please note that I am not trying to resolve any specific issue, but trying to understand what's causing this issue.

I have set the width, height and display of some divs, but the height/width settings are not being honored. The text is also being pushed downward.

http://jsfiddle.net/k7esv/

1) Why does it push the text downward when height is set in table-row then BUT when height is removed, it places text at the top?

2) Why are the width/height settings not honored?

3) Why doesn't setting the margin property have any effect on them either?

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

解决方案

1) This seems to be a rendering issue specific to Firefox. Setting the vertical-align property on the divs fixes it. top, middle, or bottom all seem to work. I don't understand myself what FF is doing when there is a height but no vertical-align set; it might be a bug.

2) The width and height are honored, but they are subject to table sizing rules. When a table does not have enough room to give each of the cells the width they have specified, it will give more room to cells that have more content. This is what was happening with your example. If you look at my example below, you will see that when the parent element is wider than the sum total of the table cells' widths, the cells respect the width. The height should always work (except in the case of the FF rendering issue I mentioned above).

3) Table cells don't have margins. Use border-spacing and display:table on a parent div.

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

这篇关于理解display：table-cell;功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！