Wie kann ich Rechtsausrichtung in einem div innerhalb einer Tabellenzelle für den IE 7 zum Funktionieren bringen?

Question

Float:right angegeben für ein div innerhalb einer Tabellenzelle scheint in IE keine Wirkung zu haben. Ich habe auch text-align right und andere Dinge ausprobiert, um den Inhalt der Ebene rechts auszurichten, aber ohne Erfolg in IE 7.

CSS Ausschnitt:

.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}

div.workload {
    background-color: #E6D7E9;
    text-align: right;
    width: 14px;
    float: right;
}

HTML Ausschnitt:

        1

Sowohl das HTML als auch das CSS sind gültig, und in Firefox wird der Text rechts ausgerichtet, wie es sollte. Wenn Sie den vollständigen Code testen möchten, indem Sie ihn kopieren/einfügen, finden Sie ihn hier:

        Tabellentest

td {
    border: 1px solid black;
}

.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}

div.workload {
    background-color: #E6D7E9;
    text-align: right;
    width: 14px;
    float: right;
}

                     

                        2008

                     

                        Q1

                        Q2

                        Q3

                        Q4

                    Prognose der Arbeitslast

                        1

                        2

                        2

                        2

                    tatsächliche Arbeitslast

                        3

                        3

                        2

                        3

(Ich weiß, dass das CSS nicht optimal ist, da die Klassendeklarationen für mehrere Elemente wiederholt werden, aber bitte kommentieren Sie dies nicht, wenn es nicht relevant für das Problem ist.)

Answer 1

Es sollte so funktionieren, wie du es hast (oder wie alexmeia vorschlägt).

Aber (da es sich um den IE handelt) drücken die headers Q1, Q2 usw. die Tabellenspalten breiter als die angeforderten 14 px.

Die Spalten sind innerhalb der von dir definierten 14px rechtsbündig ausgerichtet, aber die Divs bewegen sich im IE nicht nach rechts. (Das Div bleibt innerhalb der 14px, die für es definiert sind, obwohl die Spalte eigentlich breiter als 14px ist)

Zur Verdeutlichung kannst du entweder die Breite auf 28px ändern oder die Farbe eines der Hintergründe ändern, um den Unterschied zwischen dem td und dem darin enthaltenen div zu zeigen.

.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}

div.workload {
    background-color: #E6EEE9;
    text-align: right;
    width: 14px;
    float: right;
}

Die Lösung für den IE besteht entweder darin, keine Breite zu definieren oder sie breit genug zu machen, um den Header aufzunehmen.

Answer 2

Sie müssen keine Regeln für das div.workload deklarieren. Verwenden Sie nur diese Regeln und alles wird gut funktionieren:

 td {
    border: 1px solid black;
     }

 .workloadcell {
    Hintergrundfarbe: #E6D7E9;
    Polsterung: 0px;
    Breite: 20px;
    Höhe: 16px;
    text-align: rechts;
    }

Answer 3

Es ist erwähnenswert, dass der Internet Explorer, insbesondere v6 auf vor SP1 XP und älteren Versionen von Windows, ernsthafte Darstellungsprobleme hat, wenn Tabellen innerhalb von Divs und Divs innerhalb dieser Tabellen vermischt werden. Sobald Sie eine bestimmte Komplexität und Verschachtelung überschreiten, kann es zu einer leeren/weißen Seite kommen.

Wenn Sie Textinhalte in bestimmten Zellen rechts ausrichten müssen, würde ich vorschlagen, eine zusätzliche Klassendeklaration zum td-Tag hinzuzufügen, anstatt ein Div zu verschachteln. Ich würde auch vorschlagen, es in IE8 zu versuchen und zu sehen, ob das Problem weiterhin besteht. Sie haben nicht erwähnt, welche Versionen Sie unterstützen müssen.