HTML and CSS Reference
In-Depth Information
Using jQuery to support older browsers
The jQuery JavaScript library uses
CSS
selectors as a key part of its
normal operation. In order for this to work cross-browser, the authors
of jQuery had to implement
CSS
selectors in JavaScript. This is handy
if you want to use the latest
CSS
features but still present more limited
older browsers with your intended design.
Here's a
CSS
selector that doesn't work
in IE8 and older:
tbody tr:nth-child(2n+1) {
background: #999;
}
The screenshot shows that in
IE8
, the
odd rows don't have the gray back-
ground that the rule specifies.
To add
IE8
support without messing up your markup, you can add
some jQuery. Start by adding the library itself:
<script src="jquery-1.5.2.min.js">
</script>
In an
IE
-only code block, use the jQuery selector engine to match the
nodes using the same selector, and add a class to them:
<!--[if lte IE 8]>
<script>
$(document).ready(
function() {
$('tbody tr:nth-child(2n+1)')
.addClass('odd');
}
)
</script>
<style>
tr.odd { background: #999; }
</style>
<![endif]-->