Tabellenlayout falsch in IE (7)

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

Frage

Unten ist der Code eines einfachen HTML mit einem Tabellenlayout. In FF es sieht, wie ich es denke aussehen sollte, in IE7 tut es nicht. was mache ich falsch?
Und wie kann ich das Problem beheben? 

<!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>
War es hilfreich?

Lösung

Ich nehme an, Sie über die minimale Höhe der mittleren Reihe beschweren (die nur rowspanned Zellen enthält) und die vergrößerte Höhe der benachbarten Reihen Lücken zwischen der divs zu kompensieren, zu verlassen.

IE kann nicht optimal Zeilenhöhen berechnen, wenn die Zeile nur rowspanned Zellen enthält. Die übliche Lösung, wenn Sie absolut nicht Rejig kann es loswerden der rowspan zu erhalten, ist ein 1px ‚Dummy‘ Spalte auf einer Seite der Tabelle hinzugefügt werden, leere Zellen enthält, die jeweils mit der ‚Höhe‘ eingestellt, wie hoch der Reihe sein sollte.

Aber ja, je nachdem, was Sie vorhaben, mit diesem, ein CSS-Layout besser geeignet sein gut zu machen. Wenn es wirklich ein Fest Pixel-für-alles-Layout wie in diesem Beispiel, die absolute Positionierung für jedes div wird eine Menge sein, viel einfacher.

Andere Bits: CSS Breite / Höhe Werte erfordern Einheiten (vermutlich 'px'); valign / Cellspacing / etc. kann leichter in einem Stylesheet getan werden, auch wenn Sie Tabellen-Layouts verwenden; ein standard Modus DOCTYPE können einige des schlechten IE Bugs (obwohl, nicht dieses alte, nicht-CSS-bezogene eins).

verhindern

Andere Tipps

Für einen Start, Ihre CSS-Werte Einheiten haben sollten, zum Beispiel width:190; sollte width: 190px;

werden

vollständig einverstanden sind, Sie einen Blick auf Plan CSS oder andere CSS-Frameworks für etwas Hilfe haben kann

Auf den ersten Blick sieht es aus wie IE7 einige gebrochene Unterstützung für diese Art der Formatierung hat. Zuerst würde ich vorschlagen, loszuwerden, die divs zu erhalten und die Formatierung (Breite und Höhe) direkt auf dem TD zu bewegen, aber ich versucht, und scheint nicht das Problem zu lösen.

Ich denke, das ist keine schöne Lösung, aber wäre es möglich, die rowspan Zellen mit mehr Zellen mit einer unsichtbaren Grenze zwischen ihnen zu ersetzen? Jedoch ist diese Lösung nicht, wenn der Text größer als die Größe der oberen Zelle ist.

Die Wahl der Doctype (4.01 Transitional ohne Systemkennung (url)) löst Quirks-Modus in IE, die es höchst inkonsistent mit anderen Browsern machen.

Wechsle zu: 

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

Oder zumindest: 

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

(und, natürlich, Validate aber die HTML und CSS (die die die fehlenden Einheiten wählen würde auf Ihrer Länge Wert)).

Sie sollten auf jeden Fall mit CSS gehen. Tabellen sollten nie für das Layout verwendet werden.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top