爱思娱乐
您的当前位置:首页浏览器的CSSHacks_html/css_WEB-ITnose

浏览器的CSSHacks_html/css_WEB-ITnose

来源:爱思娱乐


LZ注:此文原作者是:Paul Irish(Google的前端开发工程师),本文是原文的部分译文.

我不再使用CSS Hacks了,相反的是,我将使用IE的条件判断将类应用到body标签。

但是,我想记录我之前碰到过的每一个浏览器特定的CSS 选择器和样式属性。我相信也没有其他方式提供样式表给独特的Safari.

利用这些CSS Hacks,你能够更好的针对IE、Chrome、Firefox、Opera和Safari,代码如下:

浏览器特定的CSS Hacks综合列表:

 1: 
 2: /***** Selector Hacks ******/
 3: 
 4: /* IE6 and below */
 5: * html #uno { color: red }
 6: 
 7: /* IE7 */
 8: *:first-child+html #dos { color: red }
 9: 
 10: /* IE7, FF, Saf, Opera */
 11: html>body #tres { color: red }
 12: 
 13: /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
 14: html>/**/body #cuatro { color: red }
 15: 
 16: /* Opera 9.27 and below, safari 2 */
 17: html:first-child #cinco { color: red }
 18: 
 19: /* Safari 2-3 */
 20: html[xmlns*=""] body:last-child #seis { color: red }
 21: 
 22: /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
 23: body:nth-of-type(1) #siete { color: red }
 24: 
 25: /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
 26: body:first-of-type #ocho { color: red }
 27: 
 28: /* saf3+, chrome1+ */
 29: @media screen and (-webkit-min-device-pixel-ratio:0) {
 30: #diez { color: red }
 31: }
 32: 
 33: /* iPhone / mobile webkit */
 34: @media screen and (max-device-width: 480px) {
 35: #veintiseis { color: red }
 36: }
 37: 
 38: 
 39: /* Safari 2 - 3.1 */
 40: html[xmlns*=""]:root #trece { color: red }
 41: 
 42: /* Safari 2 - 3.1, Opera 9.25 */
 43: *|html[xmlns*=""] #catorce { color: red }
 44: 
 45: /* Everything but IE6-8 */
 46: :root *> #quince { color: red }
 47: 
 48: /* IE7 */
 49: *+html #dieciocho { color: red }
 50: 
 51: /* IE 10+ */
 52: @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 53: #veintiun { color: red; }
 54: }
 55: 
 56: /* Firefox only. 1+ */
 57: #veinticuatro, x:-moz-any-link { color: red }
 58: 
 59: /* Firefox 3.0+ */
 60: #veinticinco, x:-moz-any-link, x:default { color: red }
 61: 
 62: /* FF 3.5+ */
 63: body:not(:-moz-handler-blocked) #cuarenta { color: red; }
 : 
 65: 
 66: /***** Attribute Hacks ******/
 67: 
 68: /* IE6 */
 69: #once { _color: blue }
 70: 
 71: /* IE6, IE7 */
 72: #doce { *color: blue; /* or #color: blue */ }
 73: 
 74: /* Everything but IE6 */
 75: #diecisiete { color/**/: blue }
 76: 
 77: /* IE6, IE7, IE8, but also IE9 in some cases :( */
 78: #diecinueve { color: blue\9; }
 79: 
 80: /* IE7, IE8 */
 81: #veinte { color/*\**/: blue\9; }
 82: 
 83: /* IE6, IE7 -- acts as an !important */
 84: #veintesiete { color: blue !ie; } /* string after ! can be anything */
 85: 
 86: /* IE8, IE9 */
 87: #anotherone {color: blue\0/;} /* must go at the END of all rules */
 88: 
 : /* IE9, IE10 */
 90: @media screen and (min-width:0\0) {
 91: #veintidos { color: red}
 92: }

来源:http://www.ido321.com/509.html

显示全文