HTML 表格列的高度；适用于 Firefox 而不是 IE答案

【问题标题】：HTML Table columns height; Works in Firefox not in IEHTML 表格列的高度；适用于 Firefox 而不是 IE
【发布时间】：2019-02-15 15:50:20
【问题描述】：

我有一些 HTML 可以在 FireFox3/Opera/Safari 上正常显示，但不能在 IE7 上显示。 sn-p如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
    <body bgcolor="#AA5566" >
    <table width="100%">

      <tr>

        <td height="37" valign="top"><img style="float:right;" border="0" src="foo.png" width="37" height="37"/></td>

        <td width="600" rowspan="2" >
          <table width="600" height="800"><tr><td><img src="bar.jpg" width="600" height="800"/></td></tr></table>
        </td>

        <td height="37" valign="top"><img style="float:left;" border="0" src="foo.png" width="37" height="37"/></td>

      </tr>

      <!-- This row doesnt fill the vertical space on IE7 //-->
      <tr>
        <td valign="top" bgcolor="#112233">&nbsp;</td>
        <td valign="top" bgcolor="#112233">&nbsp;</td>
      </tr>

    </table>
    </body>

第二行不会正确填充由第一行中间列创建的垂直空间（注意 rowspan="2"）。相反，即使我将它们的高度设置为 37，第一行和第三列也会向下扩展。下图显示了 IE7 和 Firefox3 中发生的情况...

编辑：将 HTML 文档类型添加到代码片段中。添加了截图。

感谢任何帮助，谢谢:)

【问题讨论】：

你使用的是什么文件声明？
Chris：刚刚将其添加到代码片段中。

标签： html firefox internet-explorer-7

【解决方案1】：

正确的答案是：不要使用表格来布局页面。

技术上的答案是：您的表格单元格正在做他们应该做的事情，即您无法用您使用的代码结构解决您的问题。

老生常谈的答案是：让左右单元格的高度正好为 37 像素，您必须在左右单元格中添加 2 个额外的嵌套表格。

【讨论】：

【解决方案2】：

如果你这样尝试会怎样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
    <body bgcolor="#AA5566" >
    <table width="100%" border='1'>

      <tr>

        <td valign="top">
            <table bgcolor="#112233" height="37" width='100%'><tr><td>asdf</td></tr></table><br />
            Other content
        </td>

        <td width="600" rowspan="2" >
          <table width="600" height="800"><tr><td>asdf</td></tr></table>
        </td>

        <td valign="top">
            <table bgcolor="#112233" height="37" width='100%'><tr><td>asdf</td></tr></table><br />
            Other content
        </td>

      </tr>



    </table>
    </body>

【讨论】：

【解决方案3】：

我不太清楚为什么会这样。你想实现什么布局，它真的需要是一张桌子吗？你不应该用表格来布局页面，它们应该只用于真正的表格数据。

你考虑过使用 div 吗？

【讨论】：

我添加了一个截图来帮助解释它。是的，我可能应该使用 DIV，但如果我能修复这个错误，我宁愿不必重写它。

【解决方案4】：

通过validator 发送它，我相信你会更接近一点。

实际上 - 您看到的是 IE 的正常行为：将border="1" 添加到您的主表中，它会更清楚地向您显示正在发生的事情。

【讨论】：