Sử dụng các lớp kép trong CSS IE6?

Question

là có cách nào để làm cho IE6 hiểu các lớp đôi, nói rằng tôi có một lớp MenuButton với một lớp màu và có thể là một lớp được nhấp; như:

.LeftContent a.MenuButton {..general rules..} 
.LeftContent a.MenuButton.Orange {..sets background-image..} 
.LeftContent a.MenuButton.Clicked {...hum ta dum...} 

Bây giờ, IE6 hiểu <a class="MenuButton Orange">, nhưng khi thêm nhấn vào, như <a class="MenuButton Orange Clicked">, IE chỉ cần bỏ qua các quy tắc Clicked.

Tất nhiên, tôi có thể viết lại CSS của tôi, và có những quy định riêng cho .MenuButtonOrange
và như vậy (và có lẽ nó muốn lấy rất nhiều thời gian ngắn hơn so với yêu cầu câu hỏi này ;-),
nhưng Trời ơi, nó chỉ không hấp dẫn và Web 0.9 ...

Chúc mừng!

Answer 1

IE6 không hỗ trợ nhiều bộ chọn lớp. Lý do bạn thấy thay đổi với lớp Orange là vì a.MenuButton.Orange được IE6 hiểu là a.Orange.

Tôi khuyên bạn nên cơ cấu lại đánh dấu của bạn theo cách như vậy mà bạn có thể làm việc xung quanh này:

<div class="leftcontent"> 
    <ul class="navmenu"> 
    <li><a class="menubutton orange" href="#">One</a></li> 
    <li><a class="menubutton orange clicked" href="#">Two</a></li> 
    </ul> 
</div> 

Bằng cách nhóm bởi một tổ tiên cụ thể hơn bạn có thể tạo sự thay đổi với các lớp scoped bởi tổ tiên đó (trong ví dụ này navmenu) :

.leftcontent .navmenu a { /* ... basic styles ... */ } 
.leftcontent .navmenu a.orange { /* ... extra orange ... */ } 
.leftcontent .navmenu a.clicked { /* ... bold text ... */ } 

Nó không tốt bằng nhiều lớp, nhưng tôi đã sử dụng nó để giải quyết thiếu sự hỗ trợ trong IE.

Answer 2

Nếu tôi sử dụng (như tôi đã viết trong câu hỏi), các quy tắc thẻ cụ thể, như .LeftContent a.MenuButton.Orange, nó hoạt động ...

Nó chỉ phù hợp với họ nếu các lớp trong bộ chọn theo thứ tự giống như các lớp trên phần tử.

Điều này không đúng. IE6 (và IE7 ở chế độ Quirks) chỉ nhớ một lớp cho mỗi bộ chọn một phần. Nếu bạn viết hai, cái thứ hai sẽ ghi đè đầu tiên. Vì vậy, ‘a.MenuButton.Orange’ có hiệu lực giống hệt ‘a.Orange’.

Vì vậy, nhiều bộ chọn lớp vẫn phải được tránh ngay bây giờ.

Answer 3

Tập lệnh IE7 của Dean Edwards 'thêm nhiều hỗ trợ lớp cho IE6. Xem http://code.google.com/p/ie7-js/