WebKit瀏覽器未填滿的div

我的代碼：WebKit瀏覽器未填滿的div

<html> 
    <head></head> 
    <body> 
    <div style="position: relative; border:1px black solid; background-color:#00a2e8; min-width: 100px; min-height: 100px; width: 1px; height: 1px"> 
     <table border="1" style="width:100%; height: 100%;"> 
     <tr><td style="vertical-align: middle">abc</td></tr> 
     </table> 
    </div> 
    </body> 
</html>

在Firefox，它顯示優良，表填滿整個格，具有vertially爲中心的表的內容。

如果我在基於Webkit的瀏覽器上顯示它，表格不填滿整個div，導致標籤垂直對齊到頂部。如何讓表擴展爲基於Webkit的瀏覽器上的整個div？

更具體地說，我對Android瀏覽器感興趣。

來源

2012-12-28 Jakub Zaverka

沒有'vertical-align：center' - 有'middle'雖然 – sachleen

@sachleen你說得對，我編輯了代碼。但是，這不是我遇到的問題。 –

對於您的情況，我通常會使用position:absolute;height:100%;作爲內部元素。但是，這並不適用於一張桌子，所以我用display:block使它顯示爲一個普通的DIV。似乎運作良好。

Working example

<html> 
    <head></head> 
    <body> 
    <div style="border:1px black solid; background-color:#00a2e8; min-width:100px; min-height:100px;height:100px;width:100px;"> 
     <table style="display:block;border:1px solid red;height:100%;"> 
      <tr><td style="vertical-align: center;">abc sdfs dfs df sdf sd fsd fsd fsdf sds dfs df </td></tr> 

     </table> 
    </div> 
    </body> 
</html>

來源

2012-12-28 23:41:29

這不起作用。在瀏覽器中，表格會溢出div並跨越整個頁面。如果我將表格的大小設置爲1px寬度和高度，則表格停止跨越。 –

請注意，具體我對Android瀏覽器感興趣。我不確定各種基於webkit的瀏覽器是否存在差異。 –

http://jsfiddle.net/4fCDc/1/適用於Android –

通過設置td高度你可以得到這樣的：

http://jsfiddle.net/d7kfR/

難道你需要什麼？

來源

2012-12-28 23:43:47 WooCaSh

我寧願避免設置絕對尺寸。桌子的寬度和高度最少爲100px，但它們可能更多。 –

WebKit瀏覽器未填滿的div

回答

相關問題