Mashupdesign Blog : Web Design, Coding, and UI/UX

CSS Hack for Safari & chrome, internet explorer 6 ,7,8, and Firefox

We all  have a problem with browser compatibility. Hacking CSS for me is not a shame since many browsers are not trying to be web standard compliant yet so what the hell! We try to do standard but they’re not (especially IE family). If css hack work why not implement it.

let do it…

Chrome & Safari(webkit)

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  
/* Safari 3.0 and Chrome rules here */
#test1{background-color:blue;color:#fff;}
}

This is another way

body:nth-of-type(1) #test1{ background-color:aqua;}

IE 8 only

#test1{background-color:#fff \0/

IE7 only

#test1{*background-color:#fff}

IE6 only

* html #block { /* target IE6 only */ 
margin-top: 50px;
}

Note: remeber how ordeering these  are the most important part. Try to put a correct css on the top and folowing with hacks. These hacks do work!

enjoy!