顯示：表格單元格不會不斷設置高度xbrowser（ie8表格bug）

我正在設置一個包含大量動態內容的頁面。我正在組織這個表格。有三行，每行都有一個單元格。由於我已經設置了頂部單元的高度，所以頂部部分作爲固定頭部工作。底部單元格作爲頁腳，因爲它也具有靜態高度。表格的總高度設置爲100％，中間的行/單元格留下充滿動態內容和表格中的剩餘空間。下面是一個示範問題的示例：顯示：表格單元格不會不斷設置高度xbrowser（ie8表格bug）

<html> 
    <body> 
    <div class="element_container", style="width: 600px; height: 500px;"> 
     <div class="table", style="display: table; height: 100%; width: 100%; background: blue;"> 
     <div class="row", style="display: table-row;"> 
      <div class="cell", style="display: table-cell; height: 40px; width: 100%; background: green;"> 
      </div> 
     </div> 
     <div class="row", style="display: table-row;"> 
      <div class="cell", style="display: table-cell; height: 100%; width: 100%; background: red;"> 
      </div> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

在Chrome/Firefox/Safari中，表的總高度保持在500px。在IE8中，它變成540px，就好像第二個單元格的100％高度是從表本身繼承的，而不是它的父行。

有無論如何讓表在跨瀏覽器以相同的方式工作？或者，至少在IE8的表格中獲得同樣的功能？

來源

2010-10-25 Winston Zirjacks

不知道你爲什麼試圖在不使用表標籤的情況下創建表？這似乎工作正常。

<html> 
    <body> 
    <table style="width:600px; height:500px; background:blue;"> 
     <tr> 
     <td style="height:40px; background: green;">Hi</td> 
     </tr> 
     <tr> 
     <td style="background: red;">Hello</td> 
     </tr> 
    </table> 
    </body> 
</html>

來源

2010-10-25 18:01:25 corymathews

最大的問題是，我仍然需要使用高度：100％來正確顯示我的內容。我在rails的幫助下渲染了一些部分，這爲我的動態內容打下了基礎。沒有將高度設置爲SOMETHING，當呈現的部分（具有100％/ 100％的div）不會繼承高度時，表格將自動摺疊單元格。 – 2010-10-25 18:56:17

IE的一個最大的問題是它對單元對齊的缺省解釋：它也是另一種盒子模型。在符合標準的瀏覽器中，高500px的東西通常在IE中更高或更寬。

最好的選擇是對IE樣式表使用條件註釋：我儘可能使用IE 6,7,8中的一個來強制網站在所有瀏覽器中保持一致。

試着這麼做：

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="includes/styleIE6.css" /><![endif]--> 

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="includes/styleIE7.css" /><![endif]--> 

<!--[if IE 8]><link rel="stylesheet" type="text/css" href="includes/styleIE8.css" /><![endif]-->

或者，似乎沒有理由讓你使用一個表。創建div來代替更一致的佈局。

來源

2010-10-25 18:26:29 Jamin

顯示：表格單元格不會不斷設置高度xbrowser（ie8表格bug）

回答

相關問題