显示：表格单元格不会不断设置高度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）

回答

相关问题