视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
浏览器的CSSHacks_html/css_WEB-ITnose
2020-11-27 15:55:15 责编:小采
文档

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

下载本文
显示全文
专题18web插件专题html5 webgl 教程专题htmlplay前端编辑器专题web 特效专题cqp web专题onlyoffice web专题拖拽式web编辑器专题web0专题html2wxml专题cqpweb专题webpackl专题web 插件开发专题web webgl专题webgl web专题web scrape专题web demo专题webdown专题web弹窗专题web前端组件库专题v-html指令专题