Not all browsers are created equal, CSS is interpret different ways, what looks perfect in one browser may not look to hot in another. While I do not recommend relying on hacks, but instead developing your code in such a way to not need them. Sometimes there are situations where applying styles to certain browsers is needed.
/*IE 7 and Modern Browsers*/
html>body #header {height: 25px;}
/*Modern Browsers (not IE 7)*/
html>/**/body #header {height: 25px;}
/*Firefox*/
#selector[id= header] {height: 25px;}
/*Hide from IE-Mac*/
/* Hide from IE-Mac \*/
#header {height: 25px;}
/* End hide */
/*IE 5*/
#header {height: 25px; height /**/:/**/ 50px;}
/*Second value will be ignored my IE 5 but not others*/
/*IE 6 and Below*/
* html #header {height: 25px;}
#header {_height: 25px;}
/*IE 7*/
*:first-child+html #header {height: 25px;}
/*Opera 9 and Below*/
html:first-child #header {height: 25px;}
/*Safari*/
html[xmlns*=""] body:last-child #header {height: 25px;}
Know any CSS hacks for browser detection that weren’t mentioned? Please share them!
