浏览器的CSS Hacks

灰太狼 2022-08-11 19:58 171阅读 0赞

LZ注：此文原作者是：[Paul Irish][]（Google的前端开发工程师），本文是原文的部分译文。

[![0][]][0 1]

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

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

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

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

2: /***** Selector Hacks ******/

4: /* IE6 and below */

5: * html #uno  { color: red }

7: /* IE7 */

8: *:first-child+html #dos { color: red }

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][Paul Irish]

[Paul Irish]: http://www.ido321.com/509.html
[0]: http://www.ido321.com/wp-content/uploads/2014/09/0_thumb.jpg
[0 1]: http://www.ido321.com/wp-content/uploads/2014/09/0.jpg

浏览器的CSS Hacks

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 css hack--浏览器兼容性问题

相关浏览器的CSS Hacks

相关 css hack

相关 css hack

相关 CSS Hack

相关（史上最详细易懂）CSS hack大全&详解（什么是 Css Hack？各个浏览器的Hack分析）

相关 css hack

相关 css hack

相关各种浏览器css hack

相关主流浏览器的一些CSS hack