css3技术

CSS HACK解决兼容问题_div+css教程(2)

字号+ 作者:H5之家 来源:H5之家 2015-09-17 16:54 我要评论( )

/* 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然后,从第二种方

/* 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>&lt;link    /&gt;</code>或者<code>@import</code>会是更好的选择。虽然分文件也是一种不错的选择,但了为页面加载速度,HTTP请求一个都不能浪费。</p>
<p>至于利用JS或者后端程序来判断,除非你有足够的资源,除非你解决不了(90%不会发生),不然,并不推荐用。附上一个表(<a rel="nofollow" href="via">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 */
其他的就不多说了。不过,还是要提醒一下: 注释也是很重要的。虽然是HACK了,但现实中情况有时候比想象中的复杂得多,给代码一个注释,好过千言万语。

最后,还是那句,希望看到你更好的方法!

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评