Использование селекторов нескольких классов в 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. Любые идеи о том, что я делаю неправильно?


css internet-explorer-8 internet-explorer-7
person Erol    schedule 04.11.2009    source источник

Ответы (2)


arrow_upward
37
arrow_downward

Вы хотите убедиться и использовать тип документа, чтобы не отображать в режиме причуд. Например:

<!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>
person Nathan Fox    schedule 04.11.2009
comment
Черт, это было очень неосторожно с моей стороны. Спасибо за помощь! - person Erol; 04.11.2009
comment
Как выйти из режима причуд и почему вы туда попадаете: stackoverflow.com/a/7176341/1806628 - person Lajos Mészáros; 04.06.2013

arrow_upward
3
arrow_downward

Не то чтобы вы обязательно делаете что-то не так, но если у вас есть такие классы, как:

.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, переопределяя его свойство ширины.

Таким образом, вы также можете применять свои классы .two, .three и .four к другим элементам страницы, ширину которых вы хотите зафиксировать до этих размеров, не полагаясь на их положение или контейнер на странице.

person Phil.Wheeler    schedule 04.11.2009