Question

我正在设置一个包含大量动态内容的页面。我在桌子里组织这个。有三行，每行有一个单元格。顶部作为固定标题，因为我设置了顶部单元格的高度。底部单元格作为页脚，因为它还具有静态高度。表的总高度设置为100％，中间行/单元格将填充动态内容和表中的剩余空间。这是一个用于演示问题的两行示例：

<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中的表中获得相同类型的功能？

Answer 1

不确定为什么要在不使用表格标签的情况下创建表格？这似乎工作正常。

<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>

Answer 2

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而不是更一致的布局。

显示：表格单元格不经常设置xbrowser（ie8表bug）

2 个答案: