As much as we don't like to deal with the IE bugs, we still have to face it because your boss and visitors are still using Explorer. It gets frustrating when different versions of Explorer displays web pages differently due to the inconsistent rendering engine. We typically use IE conditional comments to fix the IE issues. But there are more ways than the conditional comments...
Explorer. For example, add an asterisk (*) before the CSS property will
target IE7 or add an underscore before the property will target IE6.
However, this method is not recommended because they are not valid CSS
syntax.
is to add an CSS class with the IE version to the HTML tag by using IE
conditional comments. Basicially, it checks if it is IE, then add a
class to the html tag. So to target specific IE version, simply use the
IE class as the parent selector (eg.
#1 IE Conditional Comments
IE conditional comment is probably the most commonly used to fix the IE bugs for specific versions (IE6, IE7, IE8). Below are some sample code to target different versions of Internet Explorer:<!--[if IE 8]>= IE8<!--[if lt IE 8]>= IE7 or below<!--[if gte IE 8]>= greater than or equal to IE8
<!--[if IE 8]>
<style type="text/css">
/* css for IE 8 */
</style>
<![endif]-->
<!--[if lt IE 8]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->#2 CSS Rules Specific to Explorer (IE CSS hacks)
Another option is to declare CSS rules that can only be read byExplorer. For example, add an asterisk (*) before the CSS property will
target IE7 or add an underscore before the property will target IE6.
However, this method is not recommended because they are not valid CSS
syntax.
- IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 (
\9) at the end before the semicolon. - IE7 or below: add an asterisk (
*) before the CSS property. - IE6: add an underscore (
_) before the property.
.box {
background: gray; /* standard */
background: pink\9; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
}
#3 Conditional HTML Class
The third option, which was founded by Paul Irish,is to add an CSS class with the IE version to the HTML tag by using IE
conditional comments. Basicially, it checks if it is IE, then add a
class to the html tag. So to target specific IE version, simply use the
IE class as the parent selector (eg.
.ie6 .box). This is a clever way and it doesn't cause any validation errors.<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
No comments:
Post a Comment