HTML and CSS Reference
In-Depth Information
HTML5 Boilerplate gives you three class names to use for such cases, described as
follows:
.lt-ie7 : Targets all IE versions that are lower than IE7 with this class
name. This would apply styles to IE 6 and below.
.lt-ie8 : Targets all IE versions that are lower than IE8 with this class
name. This would apply styles to IE6 and IE7.
.lt-ie9 : Targets all IE versions lower than IE9. This would apply styles
to all IE versions 8 and below.
Thanks to this, we can now apply rules that target IE8 and below, which do not un-
derstand conditions in media queries by applying style rules as follows:
.lt-ie9 .t-unit-1-2 {
width: 45%;
}
As IE8 and below also do not support the box-sizing property (Mozilla Developer
Network describes the effects of this property at developer.mozilla.org/En/
CSS/Box-sizing ), this means the widths of these boxes will expand as we add
padding. Let us remove the margins on the parent element to prevent the boxes from
stacking up, as shown in the following code snippet:
.lt-ie9 .t-before-1-6,
.lt-ie9 .t-after-1-6 {
margin-left: 0;
margin-right: 0;
}
However, that doesn't quite solve our problem. Then, looking further up, we notice
that our grid cells, that is, the elements with the class t-grid__cell , have the
display property set to inline-block. Knowing that IE7 does not apply this to any
element other than those with natural inline property, we would have to add an addi-
tional declaration to make this work, as shown in the following code snippet:
Search WWH ::




Custom Search