您的位置：首页 > Web前端 > CSS

CSS Hack 和向后兼容

2010-06-10 19:37 483 查看

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){
}
然后写
@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:

<body class="ie6"><![endif]-->
<body class="ie7"><![endif]-->
<body class="ie8"><![endif]-->
<body class="ie9"><![endif]-->
<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 */

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航