I would like to use some different CSS for ie8 but keep just the one CSS file. Can anyone tell me what the best "hack" for this is? Yeah I know hacks are not good but I would like to keep one CSS file at least just for now.
For example, in non-IE8 browsers I would like the browser to see this:
div.content_header_heading {
background: -moz-linear-gradient(top, #cccccc 0%, #eeeeee 35%, #eeeeee 65%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(35%,#eeeeee), color-stop(65%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cccccc 0%,#eeeeee 35%,#eeeeee 65%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cccccc 0%,#eeeeee 35%,#eeeeee 65%,#cccccc 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 35%,#eeeeee 65%,#cccccc 100%); /* IE10+ */
}
But if the browser is IE8, I would like the browser to see this:
div.content_header_heading {
}
The best way to make sure every html element is interpreted (at all) by the browser is to use http://www.modernizr.com/
If you want to use header, footer or other new html5 elements modernizr will create them so that old browsers understand the elements.
The best way I have come across is using a different CSS file for the Internet Explorer.
Then in your HTML you can exclude or include them using the typical conditional code blocks you find on the internet.
Only put in those lines of CSS that need to be different in that IE version.
The simplest CSS hacks for different versions on IE are:
all of the above are hacks, but at least they use VALID CSS, except the hack for IE8 where i recommend using a conditional comment.
Paul Irish has a good solution to this problem. It involves using conditional comments to place classes on the
<html>
tag:Then you can target IE versions with CSS rules:
See http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/.