How to write CSS for IE at stylesheet with other default styles

10,553

I'd recommend the approach taken by the HTML5 boilerplate, outlined here by Paul Irish. Basically, set up your document like this:

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

You now have classes in place to accurately target only certain versions of IE. Your css will look like this:

.element { margin-bottom: 20px; }
.lt-ie9 .element { margin-bottom: 10px; }

You then avoid CSS hacks, and can keep everything in a single stylesheet.

10,553

Author by

user1896653

Updated on June 13, 2022

Comments

user1896653 almost 2 years
I'm working with responsive website. I've used media queries for making that responsible. Basically, I haven't used any fixed width. I've used percentage as a width of every div.

So that the website can be scaled proportionally according to resizing of browser. For using percentage of wide may be caused problem for older ie. As ie prior to ie 9 don't support media query, so, I want to build the non-scalable version for those ie. As I gave only few code for bringing scalability, so is it okay if I write the CSS code at my main stylesheet under/at anywhere with my default CSS?

Like at style.css:
```
#info {
   width: 13.672%;
   /*if ie9 and lower
   width: 175px;*/
   height: 830px;
   /*if ie9 and lower
   margin-right: 40px;*/
   margin-right: 3.125%;
   float: left;
}

img {
  margin: 0px;
  padding: 0px;
  border: 0px;
  max-width: 100%;
  /*if ie9 and lower
   max-width: inherit*/
  height: auto;
  /*if ie9 and lower
   height: inherit*/
}
```
I want to write that format. But, I don't know the correct format. Please, tell me the correct format.

Another question to you. As those version of ie don't support the media-query, so the meta tag
```
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<link href="KT2012.css" rel="stylesheet" type="text/css" />
<link href="kt_large.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="kt_small.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="kt_tablet.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:801px) and (max-width:1024px)" href="kt_medium.css" />
```
with tablet.css, mobile.css don't create any problems for those older version ie, isn't it? I mean I want to write IE special css only at my main stylesheet (KT2012.css). Should I write every IE special css at every stylesheet like at mobile.css, tablet.css etc? If that devised based css file don't support at older ie, so, I don't do any things with that device/viewport based stylesheet if I make non-scalable version for ie, isn't it?