CSS Hack 和向后兼容
1 instructions: //unvalidate
2
3 仅 Firefox 3 和 IE7 识别的 Hack:
4 selector, x:-moz-any-link, x:default {
5 /* Firefox 3 and IE7 rules here */
6 }
7
8 如果想区分opera和safari的话先写
9 @media all and (min-width: 0px){
10 }
11 然后写
12 @media screen and (-webkit-min-device-pixel-ratio:0){}
2
3 仅 Firefox 3 和 IE7 识别的 Hack:
4 selector, x:-moz-any-link, x:default {
5 /* Firefox 3 and IE7 rules here */
6 }
7
8 如果想区分opera和safari的话先写
9 @media all and (min-width: 0px){
10 }
11 然后写
12 @media screen and (-webkit-min-device-pixel-ratio:0){}
一、添加在属性上
* ie6,ie7识别，ff不识别
_ ie6识别，ie>7,ff不识别
# ie 识别
eg: .selector{*background:url(image.jpg)}
.selector{_background:url(image.jpg)}
.selector{#background:url(image.jpg)}
二、添加在属性值上
！important ie>7, ff 识别
.selector{background:url(image.jpg)!important}
三、添加在选择器上
四、添加在全局
HTML: 添加body class:
<!--[if IE6]--><body class="ie6"><![endif]-->
<!--[if IE7]--><body class="ie7"><![endif]-->
<!--[if IE8]--><body class="ie8"><![endif]-->
<!--[if IE9]--><body class="ie9"><![endif]-->
<!--[if !IE]--><body class="non-ie"><![endif]-->
.sofish{padding:10px;}
.non-ie .sofish{padding:12px;}
.ie9 .sofish{padding:9px;}
.ie8 .sofish{padding:8px;}
.ie7 .sofish{padding:7px;}
.ie6 .sofish{padding:6px;}
/* webkit and opera */
@media all and (min-width: 0px){ .sofish{padding:11px;} }
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }
/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }
/* firefox * /
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */
html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */
[/css]
<p>然后，从第二种方式我们也可以发现。把IE注释用在body class上，而不是添加单独的<code><link /></code>或者<code>@import</code>会是更好的选择。虽然分文件也是一种不错的选择，但了为页面加载速度，HTTP请求一 个都不能浪费。</p>
<p>至于利用JS或者后端程序来判断，除非你有足够的资源，除非你解决不了（90%不会发生），不然，并不推荐用。附上一个表 （<a rel="nofollow" href="http://paulirish.com/2009/browser-specific-css-hacks/">via</a>），可以参考参 考：</p>
<h3>六：全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表：</h3>
[cc lang="css"]
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#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 */
.non-ie .sofish{padding:12px;}
.ie9 .sofish{padding:9px;}
.ie8 .sofish{padding:8px;}
.ie7 .sofish{padding:7px;}
.ie6 .sofish{padding:6px;}
/* webkit and opera */
@media all and (min-width: 0px){ .sofish{padding:11px;} }
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }
/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }
/* firefox * /
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */
html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */
[/css]
<p>然后，从第二种方式我们也可以发现。把IE注释用在body class上，而不是添加单独的<code><link /></code>或者<code>@import</code>会是更好的选择。虽然分文件也是一种不错的选择，但了为页面加载速度，HTTP请求一 个都不能浪费。</p>
<p>至于利用JS或者后端程序来判断，除非你有足够的资源，除非你解决不了（90%不会发生），不然，并不推荐用。附上一个表 （<a rel="nofollow" href="http://paulirish.com/2009/browser-specific-css-hacks/">via</a>），可以参考参 考：</p>
<h3>六：全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表：</h3>
[cc lang="css"]
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#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 */
