HTML表格列高度;适用于Firefox而不是IE

StackOverflow https://stackoverflow.com/questions/250931

题

我有一些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 =＆quot; 2＆quot;）创建的垂直空间。相反，第一行第一列和第三列向下扩展，即使我将它们的高度设置为37.下图显示了IE7和Firefox3中发生的情况......

编辑：将HTML文档类型添加到代码snippit。添加了屏幕截图。

任何帮助表示感谢，谢谢：）

有帮助吗？

解决方案

如果你这样试试怎么办：

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

其他提示

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

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

hacky的答案是：让左边和右边的单元格正好是37px高，你必须在左右单元格中添加2个额外的嵌套表格。

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

您是否考虑过使用div？

通过验证器扔掉它，我相信你会更近一点。

实际上 - 您所看到的是IE的正常行为：添加border =＆quot; 1＆quot;到你的主桌，它会告诉你发生了什么更清楚。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top