2009-11-04 11 views
15

Ich weiß, IE7 & IE8 haben angeblich Unterstützung für die Verwendung mehrerer CSS Klassenselektoren, aber ich kann nicht scheinen, um es zum Laufen zu bringen.Verwenden von mehreren Klasse Selektoren in IE7 und IE8

CSS:

.column { 
    float: left; 
    display: block; 
    margin-right: 20px; 
    width: 60px; 
} 
.two.column { 
    width: 140px; 
} 
.three.column { 
    width: 220px; 
} 
.four.column { 
    width: 300px; 
} 

HTML:

<div class='two column'>Two Columns</div> 
<div class='three column'>Three Columns</div> 
<div class='four column'>Four Columns</div> 

Es ist immer die .four.column Regel am Ende mit. Irgendwelche Ideen, was ich falsch mache?

Antwort

36

Sie möchten sichergehen und einen Dokumenttyp verwenden, damit Sie im Quirks-Modus nicht rendern. Zum Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Test Page</title> 
<style type="text/css"> 
.column { 
    float: left; 
    display: block; 
    margin-right: 20px; 
    width: 60px; 
    border: 1px solid; 
} 
.two.column { 
    width: 140px; 
} 
.three.column { 
    width: 220px; 
} 
.four.column { 
    width: 300px; 
} 
</style> 
</head> 
<body> 
<div class="two column">Two Columns</div> 
<div class="three column">Three Columns</div> 
<div class="four column">Four Columns</div> 
</body> 
</html> 
+5

Mist, das war wirklich sorglos von mir. Danke für die Hilfe! – Erol

+0

Danke danke. –

+2

Du hast mein Leben gerettet! – Fabien

3

nicht, dass Sie unbedingt etwas falsch zu machen, aber wenn Sie nur Klassen haben wie:

.column { 
    float: left; 
    display: block; 
    margin-right: 20px; 
    width: 60px; 
} 
.two { 
    width: 140px; 
} 
.three { 
    width: 220px; 
} 
.four { 
    width: 300px; 
} 

Dann sollten Sie noch das Rendern Sie erhalten, wenn Sie diese Klassen in der richtigen Reihenfolge anwenden:

<div class='column two'>Two Columns</div> 

Wenn Sie daran denken, dass die css-Klassen Programmierklassen ähneln, erweitert die .two-Klasse die Basisklasse .column und überschreitet ihre Breiteneigenschaft.

Auf diese Weise können Sie auch Ihre .two, .three und .four Klassen zu anderen Seitenelementen, deren Breite Sie auf diese Größen beheben mögen anwenden, ohne auf der Seite auf ihrer Position oder Behälter angewiesen sein zu müssen.

Verwandte Themen