Tabellentext überschneidet Tabellenrahmen oder fehlt in Internet Explorer

  • Artikel
  • 2 Minuten Lesedauer

Wichtig

Die Internet Explorer 11-Desktopanwendung wird für bestimmte Versionen von Windows 10 eingestellt und ab dem 15. Juni 2022 nicht mehr unterstützt.

Sie können mit dem Internet Explorer-Modus in Microsoft Edge weiterhin auf ältere Websites zugreifen, für die Internet Explorer erforderlich ist. Anleitung.

Die Internet Explorer 11-Desktopanwendung wird schrittweise an den schnelleren, sichereren Microsoft Edge-Browser umgeleitet und letztendlich über Windows Update deaktiviert werden. Deaktivieren von IE heute.

Dieser Artikel enthält Lösungen, um die Situation zu lösen, in der der Tabellentext den Rahmen überlappt oder aufgrund der Tabellenhöhe in Internet Explorer auf der Webseite verloren geht, die festgelegten Elemente auf Blockebene nicht anpassen kann.

Ursprüngliche Produktversion:   Internet Explorer 11, Internet Explorer 10, Internet Explorer 9
Ursprüngliche KB-Nummer:   3121136

Problembeschreibung

Wenn Sie Tabellen verwenden, die Blockelemente in Internet Explorer enthalten, treten die folgenden Symptome auf:

  • Der innere Text überlappt den Tabellenrahmen.
  • Teile des inneren Texts fehlen.

Die folgenden Internet Explorer-Versionen sind von diesem Problem betroffen:

  • Internet Explorer 9 und Internet Explorer 10 in allen Dokumentmodi außer Quirks.
  • Internet Explorer 11 in allen Dokumentmodi mit Ausnahme von Edge und Quirks.

Ursache

Dieses Problem tritt auf, da die Tabellenhöhe nicht an ein Element auf Blockebene angepasst wird, das diese Einstellung überschreitet.

Lösung

Um dieses Problem zu beheben, empfehlen wir, eine der folgenden Aktionen auszuführen:

  • Verwenden Sie auf Windows 10 Microsoft Edge.

  • Führen Sie in anderen Windows Versionen ein Upgrade auf Internet Explorer 11 durch, und rendern Sie die Seite dann im Edge-Dokumentmodus.

  • Alternativ können Sie den HTML-Code der Seite ändern. Ersetzen Sie dazu den mit DIV markierten Text mithilfe einer HTML-Tabelle, wie im folgenden Beispiel gezeigt.

    Ursprünglicher Code

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

    Ersatzcode

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