Layout della tabella errato in IE (7)

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

Domanda

Di seguito è riportato il codice di un semplice HTML con un layout di tabella. In FF sembra come penso che dovrebbe apparire, in IE7 no. cosa sto sbagliando?

E come posso ripararlo? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <TITLE>test</TITLE>
    </head>
    <body>
        <table  id="MainTable" cellspacing="0" cellpadding="0" border="1">
        <tbody>
            <tr>
                <td colspan="4">
                    <div style='width:769; height:192;'>192
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" valign="top">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
                <td rowspan="2" valign="top">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
                <td rowspan="2" valign="top">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
            </tr>
            <tr>
                <td  valign="top" rowspan="2">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
                <td  valign="top" rowspan="2">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td valign="top" >
                    <div style='width:190; height:100;'>100
                    </div>
                </td>                           
            </tr>
            <tr>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
            </tr>

            <tr>
                <td>
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td>
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
    </body>
</html>
È stato utile?

Soluzione

Suppongo che ti stia lamentando dell'altezza minima della riga centrale (quella contenente solo celle a righe) e dell'altezza allargata delle file adiacenti per compensare, lasciando spazi tra i div.

IE non può calcolare le altezze di riga ottimali quando la riga contiene solo celle con riga di righe. La solita soluzione quando non riesci assolutamente a rigirarla per sbarazzarti del rowpan è quella di aggiungere una colonna "fittizia" 1px su un lato della tabella, contenente celle vuote, ognuna con l'altezza impostata su quanto dovrebbe essere alta la riga.

Ma sì, a seconda di cosa hai intenzione di fare con questo, un layout CSS potrebbe essere più appropriato. Se è davvero un layout a pixel fissi per tutto come questo esempio, il posizionamento assoluto per ogni div sarà molto, molto più semplice.

Altri bit: i valori di larghezza / altezza CSS richiedono unità (presumibilmente 'px'); valign / cellspacing / etc. può essere fatto più facilmente in un foglio di stile anche se si utilizzano layout di tabella; un DOCTYPE in modalità standard può prevenire alcuni dei peggiori bug di IE (sebbene, non questo vecchio, non correlato ai CSS).

Altri suggerimenti

Per cominciare, i valori CSS devono avere unità, ad es. larghezza: 190; dovrebbe essere larghezza: 190px;

sono completamente d'accordo, puoi dare un'occhiata al blueprint CSS o ad altri framework CSS per un po 'di aiuto

A prima vista sembra che IE7 abbia qualche supporto rotto per questo tipo di formattazione. Inizialmente stavo per proporre di eliminare i div e spostare la formattazione (larghezza e altezza) direttamente sul TD, ma ci ho provato e non sembra risolvere il problema.

Immagino che questa non sia una buona soluzione, ma sarebbe possibile sostituire le celle a righe con più celle con un bordo invisibile tra loro? Tuttavia, questa soluzione non riesce se il testo è più grande della dimensione della cella superiore.

La scelta di Doctype (4.01 Transitional senza identificatore di sistema (url)) attiva la modalità Quirks in IE che la rende altamente incoerente con altri browser.

Passa a: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

O almeno: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

(e, ovviamente, validate ma HTML e CSS (che sceglierebbero le unità mancanti sui tuoi valori di lunghezza)).

Dovresti assolutamente andare con i CSS. Le tabelle non devono MAI essere utilizzate per il layout.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top