表格文本与表格边框重叠或在 Internet Explorer 中缺失

2020-06-09

警告

已停用、不受支持的 Internet Explorer 11 桌面应用程序在某些版本的 Windows 10 上已通过 Microsoft Edge 更新永久禁用。有关详细信息，请参阅 Internet Explorer 11 桌面应用停用常见问题解答。

本文提供了解决表格文本与边框重叠或在网页上丢失的情况的解决方案，因为 Internet Explorer 中的表高度无法调整已设置的块级元素。

原始产品版本： Internet Explorer 11、Internet Explorer 10、Internet Explorer 9
原始 KB 数： 3121136

现象

在 Internet Explorer 中使用包含块元素的表时，会出现以下症状：

内部文本与表格边框重叠。
缺少内部文本的某些部分。

以下 Internet Explorer 版本受此问题影响：

除 Quirks 之外的所有文档模式中的 Internet Explorer 9 和 Internet Explorer 10。
在所有除 Edge 和 Quirks 之外的文档模式中，使用 Internet Explorer 11。

原因

出现此问题是因为表高度不会调整以适应超出此设置的块级元素。

解决方法

若要解决此问题，建议执行以下操作之一：

在 Windows 10 上，使用 Microsoft Edge。
在其他 Windows 版本中，升级到 Internet Explorer 11，然后在 Edge 文档模式下呈现页面。

或者，可以更改页面的 HTML。为此，请使用 HTML 表替换 DIV 标记的文本，如以下示例所示。

原始代码

<!DOCTYPE HTML>
<html>
<body>
    <table style="border: 1px solid blue; height: 50px">
        <tr>
            <td style="height: 100%">
                <div style="height: 100%">
                    This text overlaps<br />
                    the<br />
                    blue<br />
                    border<br />
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

替换代码

<!DOCTYPE HTML>
<html>
<body>
    <table style="border: 1px solid blue; height: 50px">
        <tr>
            <td style="height: 100%">
                    <table>
                    <tr>
                        <td>
                            This text fits within<br />
                            the<br />
                            blue<br />
                            border<br />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

通过

表格文本与表格边框重叠或在 Internet Explorer 中缺失

现象

原因

解决方法

其他资源