空表格单元格在 IE7 标准模式下的高度为 1px答案

【问题标题】：Empty table cells have 1px height in IE7 standards mode空表格单元格在 IE7 标准模式下的高度为 1px
【发布时间】：2012-09-12 05:37:39
【问题描述】：

在 IE9 中使用 IE7 标准模式时，空表格单元格的高度为 1px。这会导致表格下方的元素在页面上的显示低于应有的位置。我使用下面的代码为此创建了一个 JSFiddle：http://jsfiddle.net/Zr7T2/3/

有没有办法让空表格单元格在 IE7 标准模式下的高度为 0px？

我需要用 HTML/CSS 解决这个问题，而不是 JS。简单地删除空单元格不是一种选择。谢谢！

<!-- 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>
            <title>IE7 empty cell bug?</title>
        </head>
        <body>
            <table cellpadding="0" cellspacing="0">
                <tbody>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                    <tr><td /></tr>
                </tbody>
            </table>
            This text should be at the top of the page. It isn't when running in IE9 with IE7 standards mode turned on.
        </body>
    </html>

【问题讨论】：

移除文档类型中的注释标签。 doctype 之前的任何内容都会将 IE 置于怪异模式。

标签： html css internet-explorer internet-explorer-7

【解决方案1】：

将单元格高度显式设置为零：

td { height: 0; }

【讨论】：

这并不能解决问题。
@Russ，你说得对，我一定是在测试的时候不小心在 IE 中切换了模式。当文档模式设置为 Quirks 模式时，该问题也出现在浏览器模式 IE 9 中的 IE 9 上。甚至在空单元格上设置display: none 也只能在表为空时解决问题，奇怪的是，当这些行位于实际角色之间时，问题就无法解决。

【解决方案2】：

您可以像这样使用特定于浏览器的 CSS：

body
{
*margin-top:-30px; /* IE 7 and below */
}

【讨论】：

对不起，我应该更具体一点：我需要让空表格单元格的高度为 0px。我已经更新了问题以澄清这一点。
这可能是 HTML/CSS 无法实现的。请看这个帖子：http://stackoverflow.com/questions/9972599/how-to-set-td-height-to-0px-in-a-table

【解决方案3】：

我有这个问题。我简单地说

<td>&nbsp;</td>

但这不是一个好的修复体，而是一个好的解决方案。

【讨论】：

这并不能解决问题