{"id":165,"date":"2010-12-02T12:52:32","date_gmt":"2010-12-02T03:52:32","guid":{"rendered":"http:\/\/santoshkori.com\/blog\/?p=165"},"modified":"2012-03-05T22:25:05","modified_gmt":"2012-03-05T13:25:05","slug":"how-to-specify-css-hack-for-specific-browser-cross-browser-compatibility","status":"publish","type":"post","link":"https:\/\/www.santoshkori.com\/blog\/how-to-specify-css-hack-for-specific-browser-cross-browser-compatibility\/","title":{"rendered":"how to specify CSS hack for specific browser Cross browser compatibility"},"content":{"rendered":"

Here are some browser specific css hacks….<\/p>\n

<\/p>\n

\/***** Selector Hacks ******\/<\/h2>\n

\/* IE6 and below *\/<\/p>\n

* html #uno { color: red }<\/strong><\/p>\n

\/* IE7 *\/<\/p>\n

*:first-child+html #dos { color: red }<\/strong><\/p>\n

\/* IE7, FF, Saf, Opera *\/<\/p>\n

html>body #tres { color: red }<\/strong><\/p>\n

\/* IE8, FF, Saf, Opera (Everything but IE 6,7) *\/<\/p>\n

html>\/**\/body #cuatro { color: red }<\/strong><\/p>\n

\/* Opera 9.27 and below, safari 2 *\/<\/p>\n

html:first-child #cinco { color: red }<\/strong><\/p>\n

\/* Safari 2-3 *\/<\/p>\n

html[xmlns*=””] body:last-child #seis { color: red }<\/strong><\/p>\n

\/* safari 3+, chrome 1+, opera9+, ff 3.5+ *\/<\/p>\n

body:nth-of-type(1) #siete { color: red }<\/strong><\/p>\n

\/* safari 3+, chrome 1+, opera9+, ff 3.5+ *\/<\/p>\n

body:first-of-type #ocho { color: red }<\/strong><\/p>\n

\/* saf3+, chrome1+ *\/<\/p>\n

@media screen and (-webkit-min-device-pixel-ratio:0) {
\n#diez { color: red }
\n}<\/strong><\/p>\n

\/* iPhone \/ mobile webkit *\/<\/p>\n

@media screen and (max-device-width: 480px) {
\n#veintiseis { color: red }
\n}<\/strong><\/p>\n

\/* Safari 2 – 3.1 *\/<\/p>\n

html[xmlns*=””]:root #trece { color: red }<\/strong><\/p>\n

\/* Safari 2 – 3.1, Opera 9.25 *\/
\n*|html[xmlns*=””] #catorce { color: red }<\/strong><\/p>\n

\/* Everything but IE6-8 *\/
\n:root *> #quince { color: red }<\/strong><\/p>\n

\/* IE7 *\/<\/p>\n

*+html #dieciocho { color: red }<\/strong><\/p>\n

\/* Firefox only. 1+ *\/<\/p>\n

#veinticuatro, x:-moz-any-link { color: red }<\/strong><\/p>\n

\/* Firefox 3.0+ *\/<\/p>\n

#veinticinco, x:-moz-any-link, x:default { color: red }<\/strong><\/p>\n

\/***** Attribute Hacks ******\/<\/h2>\n

\/* IE6 *\/<\/p>\n

#once { _color: blue }<\/strong><\/p>\n

\/* IE6, IE7 *\/<\/p>\n

#doce { *color: blue; \/* or #color: blue *\/ }<\/strong><\/p>\n

\/* Everything but IE6 *\/<\/p>\n

#diecisiete { color\/**\/: blue }<\/strong><\/p>\n

\/* IE6, IE7, IE8 *\/<\/p>\n

#diecinueve { color: blue\\9; }<\/strong><\/p>\n

\/* IE7, IE8 *\/<\/p>\n

#veinte { color\/*\\**\/: blue\\9; }<\/strong><\/p>\n

\/* IE6, IE7 — acts as an !important *\/<\/p>\n

#veintesiete { color: blue !ie; } \/* string after ! can be anything *\/<\/strong><\/p>\n\u00a0<\/td>\n

\u00a0<\/p>\n

For that<\/p>\n