How to apply #CSS #styles only to IE? CSS #Hacks for #IE

CSS Hacks for IE6,IE7,IE8,IE9,IE10,IE11

Hack for Internet Explorer (IE) Conditional Comments to fix Internet Explorer when it fails to render content (positions, padding and margins) the same way other modern browsers does

1)

add to .....
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
.... area of your HTML code.

2)IE conditional comments.

this is an more info on how to target IE6 to IE10.

See specific CSS & JS hacks beyond IE.

<pre>

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone  {color: blue/;} /* must go at the END of all rules */

/* IE9, IE10 */
@media screen and (min-width:0) {
    #veintidos { color: red}
}


/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE8 (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #veintiun { color: red; }
}

</pre>

3)Internet Explorer style hack:


hack via: http://briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/

#myelement
{
    color: #999; /* shows in all browsers */
    *color: #999; /* notice the * before the property - shows in IE7 and below */
    _color: #999; /* notice the _ before the property - shows in IE6 and below */
}

4) HACK TO CLEAR STYLES.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:”;}
abbr,acronym {border:0;}

 

5) HACKS!: FIX BOX PADDING AND STUFF and FIX CENTERING BOX ON IE .

/* Self-clearing Containers /
#container:after, #menu:after {content:”.”;display:block;height:0;clear:both;visibility:hidden;}
#container, #menu {display:inline-block;}
/ Force IE7 to respect generated content /
/ Hide the next declaration from IE Mac /
* html #container, * html #menu {height:1%;display:block;}
/ IE box model hacks */
* html #left, * html #right {width:178px;width:159px;}
* html #center {width:400px;width:380px;}
* html #menu {height:2em;}