表垂直對齊的webkit問題

Question

考慮下面的例子：http://jsfiddle.net/upsidown/z4m7r/

HTML：

<table class="main-table" cellspacing="20"> 
    <tr> 
     <td style="height:100%;"><table class="sub-table"><tr><td>Some text</td></tr><tr><td class="bottom-align">Some bottom aligned element</td></tr></table></td> 
     <td>Some very long text. Some very long text. Some very long text. Some very long text. Some very long text. Some very long text. </td> 
     <td>Some other text</td> 
    </tr> 
</table> 

CSS：

.main-table { 

    width:300px; 
    vertical-align: top; 
} 

.main-table td { 

    vertical-align: top; 
} 

.sub-table { 

    height:100%; 
} 

td { 

    border:2px solid black; 
} 

td.bottom-align { 

    vertical-align: bottom; 
    background:yellow; 
} 

黃色的單元格文本應該在底部垂直對齊。這適用於Firefox，但不適用於Safari/Chrome（webkit）瀏覽器。

任何想法如何實現這一目標？提前致謝。

Answer 1

我已經更新您的jsfiddle：http://jsfiddle.net/z4m7r/6/

首先，我不會用一個表另一個表內，因爲它會使標記的噩夢閱讀和維護。將一排放在桌子底部而另一排放在底部也很困難。相反，我只是把兩個div細胞內：

<td class="firstcell" style="height:200px;"> 
    <div>Some text</div> 
    <div class="bottom">Some bottom aligned text</div> 
</td> 

接下來，我設置爲相對母細胞的位置，並提出了底部的div絕對：

.firstcell { 
    position: relative; 
    width: 100px; 
} 

.firstcell > div { 
    border: solid thin black; 
} 

.bottom { 
    position: absolute; 
    bottom: 0; 
    background: yellow; 
} 

Answer 2

第一關：你爲什麼在那裏使用表和嵌套表？這真的是製表數據嗎？

對於你的問題：Webkit很可能嚴格遵守CSS規則height，其中說，百分之百的高度只適用於如果包含塊具有明確的高度。

這意味着您需要給主表一個高度（單元格/行的高度是根據表格的高度和表格中的其他單元格/行來顯式計算的）。如果這又是百分之百，那麼也是下一個父母（這裏是body），等等。

因此，要麼像

.main-table { height: 500px; } 

或

html, body, .main-table { height: 100%; } 

會有所幫助。

（順便說一句，在小區的height: 100%是沒有意義的。）

Answer 3

一個簡單的解決方法是用填充來填充空間：

td.bottom-align { 
    padding-top:100%; 
    vertical-align: bottom; 
    background:yellow; 
} 

這裏的演示：http://jsfiddle.net/z4m7r/11/

- -EDIT--

將父表設置爲100％的高度，它應該做的伎倆。演示：http://jsfiddle.net/z4m7r/9/