CSS Hack 和向后兼容

布满荆棘的人生 2021-12-14 06:09 308阅读 0赞

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)\{\}

一、添加在属性上

\* 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 \*/

转载于:https://www.cnblogs.com/janey/archive/2010/06/10/1755834.html

[body]: http://december.com/html/4/element/body.html