瞭解display：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高度，這隻會在另一個特定單元格內容較少時纔會生效。