Can I have CSS which is IE specific?
In this situation, I can't include another script.
So I can't do this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
and this does not work:
<!--[if IE]>
<style>
#media only screen and (min-width: 943px) and (orientation:portrait){
.ele{
width:100px;
}
}
</style>
<![endif]-->
Is there any other way of adding IE specific CSS?
You can try this,
IE6 Only
==================
_selector {...}
IE6 & IE7
==================
*html or { _property: }
IE7 Only
==================
*+html or { *property: } - Keep in mind that you have to put the IE7 property first within the same selector.
IE8
==================
.selector/*\**/ { color:#f00; }
**NOTE**: LESS v1.5.0 shoots out an error when compiling the CSS if you use this hack :/
IE8 and IE9 (TOTALLY NOT NEEDED - I LEFT HERE FOR REFERENCE ONLY)
==================
.selector { color:#f00\9; } - http://stackoverflow.com/questions/660652/ie8-css-selector
The above solution doesn't work with font-family, so instead you need to use "\0/ !important"
Example: { font-family:Arial \0/ !important; }
http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/
Also, using "\9" is picked up by IE10 and IE11 so you need to redeclare the CSS rules with "-ms-high-contrast:". See info below.
IE9 Only
==================
:root .class/#id { property:value \0/IE9; }
**NOTE**: Prepos v4.0.1 shoots out an error when compiling the CSS if you use this hack :/
http://blog.vervestudios.co/blog/post/2011/05/13/IE9-Only-CSS-Hack.aspx
IE10 Only
http://css-tricks.com/ie-10-specific-styles/
==================
Use this JavaScript:
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
Then use this CSS:
html[data-useragent*='MSIE 10.0'] h1 { color: blue; }
IE10 and IE11
==================
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.selector { property:value; }
}
Refer https://gist.github.com/ricardozea/5549389
write IE specific css styles .
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
Related
Some browser has problem with sizing and when we design a template, that template run with Firefox ok, but when we use IE to open it, sizing has problem.
How can I write an CSS order to run with an special type of browser:
example:
div{
width:500px;
/*I want write a rule that the div's width be 400px in IE, or be 100 in Firefox, How?/
}
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
Likewise, for any version of IE 5 (including 5.0, 5.01, 5.5, etc), use the following:
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
Detecting minor versions of IE 5 is a bit more tricky. The moment you specify a minor version, you are expected to get the whole version number correct. For example, to detect the release build of IE 5.5, you will need the following code:
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The test will fail if your visitor has a version of IE 5.5 that not have that exact version number (for example, if he/she has updated IE 5.5 with one of the service packs).
To make life easier for webmasters who need to test for a whole range of IE versions, you can use the comparison operators "lt" (less than), "lte" (less than or equal), "gt" (greater than), and "gte" (greater than or equal).
For example, to test for all versions of IE (that support the conditional comments) greater than or equal to version 6, you can use
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The above code examples work because a normal browser sees the entire block as an HTML comment since they are enclosed within "". IE 5 to IE 9 will however attempt to parse the block to see if it has instructions specific to it. As mentioned before, IE 10 will behave like a normal browser and ignore the comment.
You can also exclude a certain style sheet using this method. For example, to exclude the CSS file "not-ie.css" from IE 6, use:
<![if !(IE 6)]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>
refer
To target only webkit, which includes Google and Safari, encompass all the CSS that you want to use just to target Webkit in the following #media block:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* all your css here */
}
try this for all browsers
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
#media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* IE 10+ */
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#veintiun { color: red; }
}
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8, IE9 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */
/* IE9, IE10 */
#media screen and (min-width:0\0) {
#veintidos { color: red}
}
You can create an extra stylesheet for IE that overrides your standard style.
Place this in your <head> section underneath your regular style.css:
<!-- IE8 and lower CSS fix -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/css/ie8-and-down.css" />
<![endif]-->
And within ie8-and-down.css you can place the following CSS:
div {
width: 400px;
}
Is this what you were looking for?
If I would like to give a unique property to a page (say index.html) for different browsers. For example : Blue background for Chrome and Red Background for Firefox, then how can I write a CSS code to this case?
Using CSS Media Queries (Chrome/Safari)
#media not all and (-webkit-min-device-pixel-ratio:0)
{
#example
{
width: 200px;
}
}
Chrome/Safari specific css file (Chrome/Safari)
<link rel="stylesheet" href="style-sheet_chrome.css" type="text/chrome/safari" />
Here is a CSS Hacks list
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
#media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
First up, browser sniffing is bad and you will almost certainly regret doing it.
However, if you must, you could do it server-side like this: Browser sniffing with .htaccess
Ideally though, stick with best practice, which is to use conditional comments in your HTML to handle old versions of IE, and write CSS that deliberately works consistently cross-browser.
You can try this:
<script type="text/javascript">
var browser=navigator.appName;
if browser == "Microsoft Internet Explorer" {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"IE.css\">");
}
else if browser == "Firefox" {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"FF.css\">");
}
else {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"generic.css\">");
}
</script>
Source: https://stackoverflow.com/a/1706221/1087653
Or you can use commands like:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
<![if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>
<link rel="stylesheet" href="style-sheet_chrome.css" type="text/chrome/safari">
This is a bug in WebKit/Blink and Chrome plans to fix it in version 50, so it will no longer work.
http://code.google.com/p/chromium/issues/detail?id=286682
https://groups.google.com/a/chromium.org/forum/m/#!topic/blink-dev/nH1O6WszMgo
I have to apply width to a div. The width value is need to be varied across browser. I cant apply conditional css . So can there be any hack for doing this.
FF
.apply{
width: 720px;
}
IE8
.apply{
width: 690px;
}
Can these be combined using some hack so that the respective properties will be applied automaticaly as per the browser.
For Firefox and IE specifically:
In CSS:
#-moz-document url-prefix() {
//Firefox-specific CSS here.
}
In HTML:
<!--[if IE 8]>
<style type="text/css">
//IE8-specific CSS here.
</style>
<![endif]-->
For IE8 and below:
.apply{
width: 690px\9;
}
I found this link, hope its useful to you.
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
Is the width for FF different from other browsers? (except for IE of course). If not, then set your CSS to:
.apply {width: 720px;}
For IE8, use conditional statements in HTML.
<!--[if IE 8]><style type=text/css>.apply {width: 690px;}</style><![endif]-->
Apply CSS Classes based on Browsers like FF and IE & IE Edge.
Use below sample css code.
/* This is for Firefox Browser */
#-moz-document url-prefix() {
.divColor {
color: red;
}
}
/* This is for IE Browser */
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.divColor {
color: blue;
}
}
/* This is for IE Edge Browser */
#supports (-ms-ime-align:auto) {
.divColor {
color: green;
}
}
I'm facing some layout issues with a print stylesheet in webkit-based browsers, and I was wondering if there was a CSS selector, or another way to do a CSS hack to only target webkit / media print?
The classical webkit-min-device-pixel-ratio media query selector isn't working for printing.
So what's the printing equivalent to this CSS Hack? (changing the media to print, isn't working):
#media screen and (-webkit-min-device-pixel-ratio:0) {
}
You could use javascript to load CSS files for WebKit browsers only.
<head>
<link rel="stylesheet" id="hacks"/>
<script>
if(navigator.userAgent.indexOf("WebKit") != -1) {
document.getElementById("hacks").href="hacks.css";
}
</script>
</head>
You could include a stylesheet that will only be used for webkit browsers like so:
#media print and (-webkit-min-device-pixel-ratio:0) {
.black {
color:black;
}
}
There are similar features in other browsers.
Use webkit-any-link instead:
#media print
{
* > /**/ #foo, x:-webkit-any-link { padding-top: 200px; }
}
The * > /**/ selector is used to filter IE7, and can be removed if it's unsupported:
#media print
{
#foo, x:-webkit-any-link { padding-top: 200px; }
}
References
Issues for Level 4 [CSS Working Group Wiki]
CSS Selectors Level 4: The Path to CSS4
Reveal New Window Links and Links to Non HTML Files with a User Stylesheet
This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
To target elements only in IE browsers i'll use
IE6:
* html #nav li ul {
left: -39px !important;
border: 1px solid red;
}
IE7:
*+html #nav li ul {
left: -39px! important;
}
Does anyone know how to target IE8?
I'm not going to get in a debate about whether or not this method should be used, but this will let you set specific css attributes for IE8-9 only (note: it is not a selector, so a bit different than what you asked):
Use '\0/' after each css declaration, so:
#nav li ul {
left: -39px\0/ !important;
}
And to build off another answer, you can do this to assign variou styles to IE6, IE7, and IE8:
#nav li ul {
*left: -7px !important; /* IE 7 (IE6 also uses this, so put it first) */
_left: -6px !important; /* IE 6 */
left: -8px\0/ !important; /* IE 8-9 */
}
source:
http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/
2013 update: IE10+ no longer supports conditional comments.
Original answer:
Some people seem to be confused because this does not answer the letter of the question, only the spirit - so for clarification:
There is no such thing as a browser selector. There are hacks that take advantage of bugs and/or glitches in specific browsers' CSS parsers, but relying on these are setting yourself up for failure. There is a standard, accepted way to deal with this:
Use conditional comments to target IE only.
Example:
<!--[if gte IE 8]>
<style>
(your style here)
</style>
<![endif]-->
Everything inside the two <!--> will be ignored by all non-IE browsers as a comment, and IE versions that are less than IE8 will skip it. Only IE8 and greater will process it. 2013 update: IE10+ will also ignore it as a comment.
Take a look at these:
/* IE8 Standards-Mode Only */
.test { color /*\**/: blue\9 }
/* All IE versions, including IE8 Standards Mode */
.test { color: blue\9 }
(Source: David Bloom’s CSS hack for IE8 Standards Mode)
you can use like this.
it's better than
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" /><![endif]-->
-------------------------------------------------------------
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if !IE]>--> <body> <!--<![endif]-->
div.foo { color: inherit;}
.ie7 div.foo { color: #ff8000; }
This question is ancient but..
Right after the opening body tag..
<!--[if gte IE 8]>
<div id="IE8Body">
<![endif]-->
Right before the closing body tag..
<!--[if gte IE 8]>
</div>
<![endif]-->
CSS..
#IE8Body #nav li ul {}
You could do this for all IE browsers using conditional statements, OR target ALL browsers by encapsulating all content in a div with browser name + version server-side
CSS style only for IE8:
.divLogRight{color:Blue; color:Red\9; *color:Blue;}
Only IE8 will be Red.
first Blue: for all browsers.
Red: IE6,7,8 Only
Second Blue: IE6,7 Only
So Red = for IE8 only.
For a very complete summary of browser hacks (including Internet Explorer (IE), Safari, Chrome, iPhone, and Opera) visit this link:
http://paulirish.com/2009/browser-specific-css-hacks/
Building upon image72's excellent answer, you could actually have advanced CSS selectors like this:
<!--[if lt IE 7]><body class="IE IE7down IE8down IE9down IE10down"><![endif]-->
<!--[if IE 7]><body class="IE IE7 IE7down IE8down IE9down IE10down IE7up"><![endif]-->
<!--[if IE 8]><body class="IE IE8 IE8down IE9down IE10down IE7up IE8up"><![endif]-->
<!--[if IE 9]><body class="IE IE9 IE9down IE10down IE7up IE8up IE9up"><![endif]-->
<!--[if gte IE 10]><body class="IE IE10 IE10down IE7up IE8up IE9up IE10up"><![endif]-->
<!--[if !IE]>--><body class="notIE"><!--<![endif]-->
so that in your css you can do this:
.notIE .foo { color: blue; } /* Target all browsers except IE */
.IE9up .foo { color: green; } /* Taget IE equal or greater than 9 */
.IE8 .foo { color: orange; } /* Taget IE 8 only */
.IE7down .foo { color: red; } /* Target IE equal or less than 7 */
.IE8 .foo, .IE9 .foo {
font-size: 1.2em; /* Target IE8 & IE9 only */
}
.bar { background-color: gray; } /* Applies to all browsers, as usual */
/* Maybe show a message only to IE users? */
.notIE #betterBrowser { display: none; } /* Any browser except IE */
.IE #betterBrowser { display: block; } /* All versions of IE */
This is great because:
It's perfectly standards compliant (no ugly/dangerous css hacks)
No need to have separate stylesheets
You can easily target any version of IE as well as complex combinations
In the ASP.NET world, I've tended to use the built-in BrowserCaps feature to write out a set of classes onto the body tag that enable you to target any combination of browser and platform.
So in pre-render, I would run something like this code (assuming you give your tag an ID and make it runat the server):
HtmlGenericControl _body = (HtmlGenericControl)this.FindControl("pageBody");
_body.Attributes.Add("class", Request.Browser.Platform + " " + Request.Browser.Browser + Request.Browser.MajorVersion);
This code enables you to then target a specific browser in your CSS like this:
.IE8 #nav ul li { .... }
.IE7 #nav ul li { .... }
.MacPPC.Firefox #nav ul li { .... }
We create a sub-class of System.Web.UI.MasterPage and make sure all of our master pages inherit from our specialised MasterPage so that every page gets these classes added on for free.
If you're not in an ASP.NET environment, you could use jQuery which has a browser plugin that dynamically adds similar class names on page-load.
This method has the benefit of removing conditional comments from your markup, and also of keeping both your main styles and your browser-specific styles in roughly the same place in your CSS files. It also means your CSS is more future-proof (since it doesn't rely on bugs that may be fixed) and helps your CSS code make much more sense since you only have to see
.IE8 #container { .... }
Instead of
* html #container { .... }
or worse!
I have a solution that I use only when I have to, after I build my html & css valid and working in most browsers, I do the occasional hack with this amazing piece of javascript from Rafael Lima. http://rafael.adm.br/css_browser_selector/
It keeps my CSS & HTML valid and clean, I know it's not the ideal solution, using javascript to fix hacks, but as long as your code is originally as close as possible (silly IE just breaks things sometimes) then moving something a few px with javascript isn't as big of a deal as some people think. Plus for time/cost reasons is a quick & easy fix.
In the light of the evolving thread, see below for a more complete answer:
IE 6
* html .ie6 {property:value;}
or
.ie6 { _property:value;}
IE 7
*+html .ie7 {property:value;}
or
*:first-child+html .ie7 {property:value;}
IE 6 and 7
#media screen\9 {
.ie67 {property:value;}
}
or
.ie67 { *property:value;}
or
.ie67 { #property:value;}
IE 6, 7 and 8
#media \0screen\,screen\9 {
.ie678 {property:value;}
}
IE 8
html>/**/body .ie8 {property:value;}
or
#media \0screen {
.ie8 {property:value;}
}
IE 8 Standards Mode Only
.ie8 { property /*\**/: value\9 }
IE 8,9 and 10
#media screen\0 {
.ie8910 {property:value;}
}
IE 9 only
#media screen and (min-width:0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{property:value;}
}
IE 9 and above
#media screen and (min-width:0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}
}
IE 9 and 10
#media screen and (min-width:0) {
.ie910{property:value;}
}
IE 10 only
_:-ms-lang(x), .ie10 { property:value\9; }
IE 10 and above
_:-ms-lang(x), .ie10up { property:value; }
or
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up{property:value;}
}
IE 11 (and above..)
_:-ms-fullscreen, :root .ie11up { property:value; }
Javascript alternatives
Modernizr
Modernizr runs quickly on page load to detect features; it then
creates a JavaScript object with the results, and adds classes to the
html element
User agent selection
The Javascript:
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
Adds (e.g) the below to the html element:
data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'
Allowing very targetted CSS selectors, e.g.:
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
Footnote
If possible, avoid browser targeting. Identify and fix any issue(s) you identify. Support progressive enhancement and graceful degradation. With that in mind, this is an 'ideal world' scenario not always obtainable in a production environment, as such- the above should help provide some good options.
Attribution / Essential Reading
Keith Clarke
Paul Irish
Web Devout
The Spanner
I realize this is an old question but it was the first result on Google when I searched and I think I have found a better solution than the highest ranked suggestion and what the OP chose to do.
#nav li ul:not(.stupidIE) { color:red }
So technically this is the opposite of what the OP wanted, but that just means you have to apply the rule you want for IE8 first and then apply this for everything else. Of course you can put anything inside the () as long as it is valid css that doesn't actually select anything. IE8 chokes on this line and doesn't apply it, but previous IEs (ok I only checked IE7, I have stopped caring about IE6), just ignore the :not() and do apply the declarations. And of course every other browser (I tested Safari 5, Opera 10.5, Firefox 3.6) applies that css as you would expect.
So this solution, I guess like any other pure CSS solution would assume that if the IE developers add support for the :not selector then they will also fix what ever discrepancy was causing you to target IE8.
OK so, it isn't css hack, but out of frustration for not being able to find ways to target ie8 from css, and due to policy of not having ie specific css files, I had to do following, which I assume someone else might find useful:
if (jQuery.browser.version==8.0) {
$(results).css({
'left':'23px',
'top':'-253px'
});
}
\9 doesn’t work with font-family, instead you’d need to use “\0/ !important” as Chris mentioned above, for example:
p { font-family: Arial \0/ !important; }
There aren't any selector hacks for IE8. The best resource for this issue is http://browserhacks.com/#ie
If you want to target specific IE8 you should do comment in html
<!--[if IE 8]> Internet Explorer 8 <![endif]-->
or you could use attribute hacks like:
/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE8, IE9 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */
For more info on this one check: http://www.paulirish.com/2009/browser-specific-css-hacks/