Target IE9 or IE8 But Not Both Using CSS

target ie8 and ie9 only (not ie7)

If it's just one thing you need to bump, you can also use:

<!--[if IE 7 ]>    <html class= "ie7"> <![endif]-->
<!--[if IE 8 ]> <html class= "ie8"> <![endif]-->

This will give the html element the class of .ie7 or .ie8 depending on what they're using or what you've specified. You can then target whatever you want to override, like:

.ie7 #promo {margin-left:-1px;} or

.ie8 #promo {margin-left:-3px;} and target them individually. You could also specify a rule for IE 9.

And include it in your main stylesheet, near the bottom. This saves you from having to make a lot of different stylesheets.

As far as IE9 not rendering as IE9, I think Internet Explorer will actually fallback into a previous renderer if it's installed for reasons that are totally unknown to me. I think Paul Irish mentions it on his talk on the HTML5 Boilerplate on the onTwik website.

They use some code in their .htaccess file to force IE to use the most recent rendering engine, and will actually force IE to use the Chrome engine if it's installed:

<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
</IfModule>
</IfModule>

Need hack for ie9 only

You can use this :root #element { color:pink \0/IE9; } /* IE9 + IE10pp4 */

Tumblr site divs not looking right in ie8 or 9 but right in ie7. Fix?

That works for me on IE8 (I don't have IE 9):

Add

#sidebar{clear:both;}

and remove

#wrapper #sidebar{min-height:1100px}

Targeting IE 8 and Below?

Try doing it the HTML5 Boilerplate way. Then just target IE versions by class in JS and CSS.

Replace your opening <html> tag with the following. Adjust to your needs:

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

In JavaScript:

var isIE8 = document.getElementsByClassName('lt-ie9').length;
var isIE7 = document.getElementsByClassName('lt-ie8').length;

if (isIE8) {
...
}

if (isIE7) {
...
}

CSS works in IE11 but not in IE8

there are two ways to handle it (css3 properties like box-shadow, border-radius won't be supported in ie8).
1) you can use hacks for ie8 :
To target Internet Explorer 8 and below in CSS, append “9” to the end of the style you want to apply. e.g.

div {
border: 2px solid #aaa; /* for all browsers */
border: 2px solid #f009; /* IE8 and below - red border */
}

.element {
margin-bottom: 20px;
margin-bottom: 10px\9; /* IE8 */
}

2) using conditional statements from within your HTML :

 <!--[if lte IE 9]>
Your IE8 and below HTML code here.
Perhaps importing a specific style sheet.
<![endif]-->

e.g :

<!--[if lte IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->

styles :

.element {
margin-bottom: 20px;
}

.ie7 .element {
margin-bottom: 10px;
}

.ie8 .element {
margin-bottom: 15px;
}

conditional comments IE 9

Yes, the way you set it up is correct and can be implemented in the <head> of the document.

As mentioned in the MSDN Compatibility documents about conditional comments:

<!--[if expression]> HTML <![endif]--> 

is the way to write it. Any HTML element inside can be written, so <style> is valid to use.

<!--[if IE 9]><style>body { background-color: red; }</style> <![endif]--> 

Read more about conditional comments at MSDN or at Quirksmode (with some better examples).

PIE CSS works in IE9 but not IE8

I too faced the same issue and following was the reason for my problem:

  • I used a wrong positioning for my DIV element.
  • I was targeting the wrong path in behavior.

From your code, the problem seems to be in targeting the wrong path.

behavior: url(/owmw/web/css/PIE.htc);

FIX:
Instead try to refer the PIE.htc file in css folder and make it look like behavior: url(PIE.htc);
or

use behavior: url(owmw/web/css/PIE.htc);

Check out behavior property.

I might be wrong, but this solved my issue.

Even I tried using behavior: url(../owmw/web/css/PIE.htc); but not worked.

From your comments, it seems you're using X-UA-Compatible as a fix and it works only through IE10 compatibility mode.

!--  Force IE to use the latest version of its rendering engine -->  
<meta http-equiv="X-UA-Compatible" content="IE=edge">

By telling IE to use the latest version of its rendering engine in your page.
Incase if your user opens in IE8 browser? This will certainly fails.

You can check this in MSDN Library.

Hope you understand.

How can I set CSS only for specific IE browsers?

How about that?

http://www.quirksmode.org/css/condcom.html

Or that if you don't like those statements

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/



Related Topics



Leave a reply



Submit