This question already has answers here:
How to target only IE (any version) within a stylesheet? [duplicate]
(6 answers)
Closed 5 years ago.
I am looking for a way to modify my style.css file to target ONLY Internet Explorer browser (so without impacting my styles for Chrome & Firefox).
Example
I want to the following style for Chrome & Firefox:
.header .currency {margin: **-28px** 0px 0px 0px;}
I want the following style for IE:
.header .currency {margin: **-30px** 0px 0px 0px;}
Note
Posts exist for CSS modification on HTML file and this is not what I am looking for. Therefore please do not provide response if this is not link to .CSS file.
IE6 to IE9
For versions of IE up to IE9, it's best to use conditional stylesheets :
<!--[if lte IE 6]> Internet Explorer 6 or less <![endif]-->
<!--[if lte IE 7]> Internet Explorer 7 or less <![endif]-->
<!--[if lte IE 8]> Internet Explorer 8 or less <![endif]-->
<!--[if lte IE 9]> Internet Explorer 9 or less <![endif]-->
Conditional stylesheets are ignored by every browser except versions of IE that correspond with the condition.
IE10 to IE11
Unfortunately, IE10 and IE11 do not support conditional stylesheets. However, you can use the following CSS hack to target only those two browsers :
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
// Put your IE10+-specific CSS here
}
See browserhacks.com for an overview of different ways to target specific browsers with CSS.
Note
For various reasons, it's recommended to write as little browser-specific CSS as possible.
Best way is use conditional comments.
For example:
<!--[if IE 8]>
load here your ie8.css
<![endif]-->
IF you want edit only CSS:
/* IE css hack */
margin-top: 10px\9 /* apply to all ie from 8 and below */
*margin-top:10px; /* apply to ie 7 and below */
_margin-top:10px; /* apply to ie 6 and below */
Final mode, #media hack.
Related
I am using simple method to target IE only CSS.
<!--[if !IE]><!-->
<body>
<!--<![endif]-->
<!--[if IE]>
<body class="ie">
<![endif]-->
<div class="Out">My test content
</div>
External CSS
.Out{
width:300px;/*Not for IE*/
}
ie. Out{
width:300px; /*only for IE*/
}
But In FF & chrome developer tool I am seeing body get class="ie" which is wrong.class="ie" is only for IE browsers.
There are number article I have referred
Reference:
https://css-tricks.com/snippets/html/add-body-class-just-for-ie/
https://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Detecting IE11 using CSS Capability/Feature Detectionenter link description here
http://www.positioniseverything.net/articles/cc-plus.html .....etc list goes on
I have referred numbers of article but not helping.I think I am missing some things.
I have tried lots of thing from various source and article as I mentioned in my question.
Fortunately what work for me is answer from "SW4" in how-to-write-a-css-hack-for-ie-11
IE 8,9 and 10
.Out {
width:400px\0; /*For IE 8,9 and 10.*/
/* For me above code is also supporting in IE 11 also. However, for IE 10+ browser I have added media query using -ms-high-contrast below*/
width: 300px; /*for other Browsers*/
}
Here’s the technique, which is really rather simple: create a media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+), it will only be parsed in Internet Explorer 10 and greater.
-ms-high-contrast supports two values: none and active. So to target IE10+ regardless of the property’s setting, use this media query:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
width:400px; /* IE10+ CSS styles go here */
}
I want to hide a specific section in my jsp page for IE8 only. I want it to be showed in other browsers like IE9, IE9+, Chrome, Safari, Firefox etc. Tried the following snippet:
<!--[if IE8]>
<li>{{common}}</li>
<![endif]-->
It hides the element in IE8, but also in other browsers too! I want it be hide only in IE8. How to acieve that?
<!--[if !IE 8]><!-->
<li>{{common}}</li>
<!--<![endif]-->
Here is my code for IE9 and above:
<!--[if gte IE 9]>
<style type="text/css">
#bottom p{
font-size:10pt!important;
}
#pop_cities{
font-size:14pt !important;
font-weight:bold !important;
padding-right:10px !important;
}
</style>
<![endif]-->
How can I apply these style for the version 9 of Internet Explorer and above?
Conditional comments are no longer supported:
http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
They don't work for version 10 and greater.
There is a hack for Internet Explorer 10, which you might want to use:
. ie10 #hack{
/* Only works in IE10 */
}
Maybe you have to arm yourself with some JavaScript for the fight against the future versions of Internet Explorer, if you can't fix the underlying problem. For example with JQuery:
if ($.browser.msie && $.browser.version == 10) {
$("html").addClass("ie10");
}
As #Spudley mentioned, the $_browser property is deprecated and already removed in the newer version of jQuery. Maybe it's better to check the browser for e certains feature you need. For example with Modernizr. This is also recommended in the JQuery documentation.
Conditional comments supported IE9 and below version
IE 10+ browser support #media screen
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/*css*/
}
I am writing some markup, which includes a image below a div. I want to add another image when the browser is IE8. How do I write IE8 specific markup using javascript or JQuery?
You don't need JS / Jquery for this, you can just use normal CSS.
All you're doing is adding a class to your HTML depending on the version of IE that is detected.
In your header add these (or a variation of) conditionals:
<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
Then you can show / hide elements in your CSS like so:
.ie8 .myImage {
display: block;
}
.ie7 .myImage {
display: none;
}
You can use jQuery to recognize Internet Explorer version 8.
http://api.jquery.com/jQuery.browser/
if ($.browser.msie && parseInt($.browser.version) == 8)
{
//IE8 specific code block
}
I have a website I am working on: tinyurl.com/6s4nwnu
I have the whole website other then the menu and the footer in a wrapper div. The footer div has a clear:both on it, that works in every browser but IE (go figure).
I have tried the clear fix, with no luck.
When you resize the browser, the menu disappears as well, and the footer goes to mid-page. Not sure why.
Suggestions?
You have a few more issues with the page besides that, and fixing them might fix the rest. Your text also goes out of frame if the window size is not wide enough to display all the text. A min-width would help out with that. It also may help out with your other problems.
Right now your #content sizes don't match up right with the box model for ie8 or lower, so fixing all of that should come first to narrow down where the other issues are coming from. The DTD would need to be set so that IE uses Quirks Mode, because that's the only way I'm getting the boxes to line up right. I notice that you've done that, but by doing so, the IE9 design is not as clean as it should be. Using the Internet Explorer conditional css tags should help out there. I'd put in a min-width for all of it so that it doesn't break when your width is not great enough, since that is a problem in Firefox as well. I tried using IETester to see if it could recreate the ie6 error, but no luck there. I would put in a min-width on your content, and see if your problems go away.
There are many solutions.
See http://paulirish.com/2009/browser-specific-css-hacks/
Where you can find a detailed list of browser specific hacks to target specific browsers.
Or
You can use Paul Irish's conditional html class.
Which i extended for your case to include "ie" besides the version.
<!--[if lt IE 7 ]> <html class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
Where you can later target IE like so:
.ie{} // targets all IE's
.ie6{} // targets IE6
.ie7{} // targets IE7
.ie8{} // targets IE8
.ie9{} // targets IE9
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/