2009-11-04 9 views
15

Wiem IE7 & IE8 podobno mają wsparcie dla wielu selektorów klasy CSS, ale nie mogę go uruchomić.Używanie selektorów wielu klas w IE7 i 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> 

To zawsze kończy się stosując regułę .four.column. Jakieś pomysły na temat tego, co robię źle?

Odpowiedz

36

Chcesz się upewnić i używać typu dokumentu, aby nie renderować w trybie dziwactwa. Na przykład:

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

Bzdura, to było naprawdę nieostrożne. Dzięki za pomoc! – Erol

+0

Dziękuję, dziękuję. –

+2

Uratowałeś mi życie! – Fabien

3

Nie, że jesteś zawsze robi nic złego, ale jeśli tylko mają zajęcia jak:

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

Następnie należy jeszcze uzyskać renderowania chcesz i kiedy stosować te zajęcia w odpowiedniej kolejności:

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

Jeśli sądzisz, że klasy css są podobne do klas programowania, klasa .two rozszerza klasę podstawową .column, prześlizgując się po swojej właściwości width.

W ten sposób można również zastosować klas .two, .three i .four do innych elementów strony, których szerokość chcesz naprawić tych rozmiarach, bez konieczności być uzależnione od ich położenia lub pojemnika na stronie.

Powiązane problemy