您好,欢迎访问一九零五行业门户网

浏览器的CSS Hacks_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; }
64:
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:
89: /* ie9, ie10 */
90: @media screen and (min-width:0\0) {
91: #veintidos { color: red}
92: }
来源:http://www.ido321.com/509.html
其它类似信息

推荐信息