0

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

<!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 文档类型添加到代码片段中。添加了截图。

任何帮助表示赞赏，谢谢:)

4

4 回答 4

3

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

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

骇人听闻的答案是：让左右单元格的高度正好为 37px，您必须在左右单元格中添加 2 个额外的嵌套表格。

于 2008-10-30T18:47:35.070 回答
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>
于 2008-10-30T18:55:25.493 回答
0

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

你考虑过使用 div 吗？

于 2008-10-30T17:29:09.627 回答
0

把它扔给一个验证器，我相信你会更接近一点。

实际上 - 你所看到的是 IE 的正常行为：将border="1" 添加到你的主表中，它会更清楚地告诉你发生了什么。

于 2008-10-30T18:19:25.703 回答