来来来,大家都来写CSS HACK吧~ IE5/6/7/8 + FF1/2/3 + Safari + Chrome + Opera
by: ponytail @ 02 三, 2010 in: ┨Stuuuuuuuudy
到处看来,记录整理一下,现在用着以后肯定也要一直用。。。
normal
.sampleCss {
height:10px;
}
FF & IE8/7/6
.sampleCss {
height: 10px;
height: 10px\9;
*height: 10px;
_height:10px;
}
Firefox 2及以前版本
body:empty .selector {
height:10px;
} 或
#selector[id=SELECTOR] {
height:10px;
} 或
html>/**/body .selector, x:-moz-any-link {
height:10px;
}
Firefox 3
html>/**/body .sampleCss, x:-moz-any-link, x:default {
height:10px;
} 或
@-moz-document url-prefix(){
.sampleCss{height:10px;}
}
Safari3
body:nth-of-type(1) .sampleCss {
height:10px;
} 或
@media screen and (-webkit-min-device-pixel-ratio:0){
.sampleCss{height:10px;}
}
Chrome
body:nth-of-type(1) .sampleCss {
height:10px;
}
Opera
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
head~body .sampleCss{ height:10px;}
}
补充:
@media all and (min-width:0) {
.class{
background-color:#FF00FF; /*Opera和Safari */
html* .class{
background-color:# 808080; /*Saafari*/
}
}
}
2010.05.12 补充 幸福收藏夹-说说CSS Hack 和向后兼容
/***** 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 */



























