Condividi tramite

Il testo della tabella si sovrappone ai bordi della tabella o non è presente in Internet Explorer

Avviso

L'applicazione desktop Internet Explorer 11, ritirata e fuori supporto, è stata disabilitata in modo permanente tramite un aggiornamento di Microsoft Edge su alcune versioni di Windows 10. Per altre informazioni, vedere Domande frequenti sul ritiro delle app desktop di Internet Explorer 11.

Questo articolo fornisce soluzioni per risolvere la situazione in cui il testo della tabella si sovrappone al bordo o viene perso nella pagina Web a causa dell'altezza della tabella in Internet Explorer non può modificare gli elementi a livello di blocco impostati.

Versione originale del prodotto: Internet Explorer 11, Internet Explorer 10, Internet Explorer 9
Numero KB originale: 3121136

Sintomi

Quando si usano tabelle che contengono elementi di blocco in Internet Explorer, si verificano i sintomi seguenti:

  • Il testo interno si sovrappone al bordo della tabella.
  • Mancano parti del testo interno.

Le versioni seguenti di Internet Explorer sono interessate da questo problema:

  • Internet Explorer 9 e Internet Explorer 10 in tutte le modalità documento, ad eccezione di Modalità Quirks.
  • Internet Explorer 11 in tutte le modalità documento, ad eccezione della Modalità Edge e della Modalità Quirks.

Causa

Questo problema si verifica perché l'altezza della tabella non viene modificata in modo da contenere un elemento a livello di blocco che supera questa impostazione.

Risoluzione

Per risolvere questo problema, è consigliabile eseguire una delle operazioni seguenti:

  • In Windows 10 usare Microsoft Edge.

  • In altre versioni di Windows eseguire l'aggiornamento a Internet Explorer 11 e quindi eseguire il rendering della pagina in modalità documento Edge.

  • In alternativa, è possibile modificare il codice HTML della pagina. A tale scopo, sostituire il testo con tag DIV usando una tabella HTML, come illustrato nell'esempio seguente.

    Codice originale

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

    Codice di sostituzione

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