Using multiple-class selectors in IE7 and IE8

问题

I know IE7 & IE8 supposedly have support for using multiple CSS class selectors, but I can't seem to get it to work.

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>

It always end up using the .four.column rule. Any ideas on what I'm doing wrong?

回答1:

You want to make sure and use a doc type so you do not render in quirks mode. For example:

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

Not that you're necessarily doing anything wrong, but if you just have classes like:

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

Then you should still get the rendering you want when you apply those classes in the right order:

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

If you think of the css classes being like programming classes, the .two class extends the base .column class, over-riding its width property.

This way, you can also apply your .two, .three and .four classes to other page elements whose width you want to fix to those sizes, without having to be reliant on their position or container on the page.

来源：https://stackoverflow.com/questions/1671178/using-multiple-class-selectors-in-ie7-and-ie8

标签

css

internet-explorer-8

internet-explorer-7