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
How to Draw Realistic Smooth Slit Shadow with Pure CSS3
How to Vertically Center Align a Position:Relative Element
Make Div Inside Parent 100% Width of Body, Not Parent Div
Border-Radius CSS Property Curve Outside
Center Align Position Absolute Object Horizontally
Bootstrap 3: Can the Glyphicons Be Stacked Like Font Awesome's Icons
Selector for One Tag Directly Followed by Another Tag
Combine Calc() with Attr() in CSS
Colspan Messes with Fixed Width Table
Hiding Table Data Using <Div Style="Display:None">
Can Flexbox Divide Items Evenly on Multiple Rows
What Browsers Support "!Important"
How to Make Angled Tab Like This Using CSS
Bootstrap 4 Ie 11 Does Not Work
How to Stop a CSS Layout from Distorting When Zooming In/Out