css在表格行內100％拉伸的表格在IE中失敗

問題：拉伸表格行中的100％寬度/高度在IE中不起作用。爲什麼？css在表格行內100％拉伸的表格在IE中失敗

HTML：

<body> 
    <div id="row"> 
     <div id="table"> 
      this table should be 100% width/height, green color<br/> 
      It works in ANY browser except IE.<br/> 
      WHY?! 
     </div> 
    </div> 
</body>

CSS：

html, body { 
    position:relative; 
    width:100%; 
    height:100%; 
    padding:0; 
    margin:0; 
} 
body { 
    display:table; 
} 
#row { 
    display:table-row; 
    width:100%; 
    height:100%; 
    background:#f00; 
} 
#table { 
    display:table; 
    width:100%; 
    height:100%; 
    background:#0f0; 
}

這個代碼在IE之外的所有瀏覽器（7,8,9,10）。任何人都知道如何解決這個只使用CSS？

來源

2013-07-11 Julius Loa

IE哪個版本？ – falguni

在7,8,9,10測試 - 都無效。所以基本上它在IE中根本不起作用。 –

如果有其他人遇到這個問題，我會遇到完全相同的問題，並通過在父div（具有display：table的那個）上設置最小高度（可以是任何值，1px）來解決此問題。 – Lorentz

的Internet Explorer精彩之美，是考驗耐心的許多開發商，然而解決辦法如下


html, body { 
    position:relative; 
    width:100%; 
    height:100%; 
    padding:0; 
    margin:0; 
} 
#table { 
    position: relative; 
    display:table; 
    width:100%; 
    height:100%; 
    background:lightgreen; 
} 

body { 

} 
#row { 
    width:100%; 
    height:100%; 
    position: static; 
    display:block; 
    background:lightblue; 
    text-align:center; 
    float: center; 
    top:100%; 
}

來源

2013-07-11 15:40:37

等等？你嘗試過你的解決方案嗎？它根本不起作用：D –

這是更新。你必須聲明一個DOCTYPE –

css在表格行內100％拉伸的表格在IE中失敗

回答

相關問題