Using Multiple-Class Selectors in IE7 and IE8

Using multiple-class selectors in IE7 and IE8

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>

Use :not() pseudo-class in IE7/IE8

Or you can use Dean Edwards IE7.js

CSS selectors not applying in IE7 and IE8

This site is built using HTML5 which not supported by ie7 and ie8 and not fully supported by ie9.

take a look for modernizr :

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

or you may want to re-factor your HTML using XHTML by replacing nav, section, header tag with supported tags

Multiple attribute jQuery selector not working in IE8

Thanks all for your valuable replies.

Instead of following selector

$("input[class='EditModeStatus'][value='true']")

I used this

var IsEditModeOn = $("input.EditModeStatus").filter(function () { return this.value == 'true' }).length > 0;

and it works in all browsers.

IE8 and jQuery selectors

The selector works correctly on the jQuery side...but IE8 discards the style rule entirely (in compliance with the specification) because it doesn't recognize nth-child:

tr:nth-child(odd) td, tr.odd td {
  background-color: #86B486;
}

If you split it, it'll work correctly:

tr:nth-child(odd) td {
  background-color: #86B486;
}
tr.odd td {
  background-color: #86B486;
}

Here's the original version (a single rule IE8 removes) and here's a fixed sample, with the rule split.

For completeness sake, reversing the rule like this doesn't help:

tr.odd td, tr:nth-child(odd) td {
  background-color: #86B486;
}

getElementsByClassName() with two classes

You can't do it with getElementsByClassName() method instead use querySelectorAll() method with comma separated class selectors.

document.querySelectorAll('.a,.b')

Using Multiple-Class Selectors in IE7 and IE8