How to resolve css incompabilities/differences between different versions of IE?
I am having an issue wherein my web application behaves different in (IE5 & IE6)
as compared with (IE7 & IE8)
There is some CSS
Issue but I do not want to get in a situation where I make some changes in CSS File
and web application wou开发者_如何学Cld work fine in (IE5 & IE6)
and not in (IE7 & IE8)
and so my question is:
How should I approach problem to resolve CSS incompatibities or differences between different version of IE ?
Any guidance and suggestions would be highly appreciated.
Create a cascade of style sheets like so:
<link id="stylesheet1" rel="stylesheet" href="css/style.css" type="text/css" media="all" /
<!--[if IE]>
<link id="stylesheet2" rel="stylesheet" href="css/ie.css" type="text/css" media="all" />
<![endif]-->
<!--[if lte IE 6]>
<link id="stylesheet3" rel="stylesheet" href="css/ie6.css" type="text/css" media="all" />
<![endif]-->
<!--[if lte IE 5]>
<link id="stylesheet4" rel="stylesheet" href="css/ie5.css" type="text/css" media="all" />
<![endif]-->
style.css:
.myclass{
width:100px;
}
ie.css:
/* override class from style.css */
.myclass{
width:105px;
}
ie6.css:
/* override class again from ie.css */
.myclass{
width:110px;
}
ie5.css:
/* if necessary, override class again from ie6.css */
.myclass{
width:115px;
}
You only need to over-ride what needs to be over-ridden.
Pekka is right, you need to take each problem/bug/display-difference on a case-by-case basis. So if something isn't showing up right in IE6, you need to adjust it in ie6.css
. If even after that, it's not showing up right in IE5, you need to adjust it in ie5.css
.
If you practice a little, you will understand better.
Explanation:
<!--[if IE]>
only Internet Explorer browsers (all versions) will see HTML between these statements
<![endif]-->
<!--[if lte IE 6]>
only Internet Explorer 6 or lower browsers will see HTML between these statements
<![endif]-->
<!--[if lte IE 5]>
only Internet Explorer 5 or lower browsers will see HTML between these statements
<![endif]-->
Use conditional comments. Put IE version specific css in specific files only included for the particular version in question.
精彩评论