1

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.

John Slegers
  • 45,213
  • 22
  • 199
  • 169
Joel
  • 29
  • 1
  • 4

2 Answers2

5

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.

Community
  • 1
  • 1
John Slegers
  • 45,213
  • 22
  • 199
  • 169
1

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.

Nick
  • 422
  • 2
  • 9