Использование селекторов с несколькими классами в IE7 и IE8
Я знаю, что IE7 и IE8 якобы имеют поддержку для использования нескольких селекторов класса CSS, но я не могу заставить его работать.
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>
В конечном итоге используется правило .four.column. Любые идеи о том, что я делаю неправильно?
Ответы
Ответ 1
Вы хотите убедиться и использовать тип документа, чтобы вы не отображали его в режиме quirks. Например:
<!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>
Ответ 2
Не то, чтобы вы делали что-то неправильно, но если у вас есть только такие классы, как:
.column {
float: left;
display: block;
margin-right: 20px;
width: 60px;
}
.two {
width: 140px;
}
.three {
width: 220px;
}
.four {
width: 300px;
}
Затем вы должны получить нужный рендеринг при применении этих классов в правильном порядке:
<div class='column two'>Two Columns</div>
Если вы считаете, что классы css похожи на классы программирования, класс .two расширяет базовый класс .column, перегружая его свойство width.
Таким образом, вы также можете применять классы .two, .three и .four к другим элементам страницы, ширина которых вы хотите исправить для этих размеров, без необходимости полагаться на их позицию или контейнер на странице.
