IT技术博客大学习 共学习 共进步

前端设计中的浏览器CSS Hack汇总

UED TEAM 2011-07-24 14:57:30 浏览 3,743 次

CSS Hack是我们解决浏览器兼容性(尤其是IE各版本)问题的常用手段。CSS Hack的手法可以说是五花八门,使用时经常混淆。下面是一个汇总,以便查阅。

js代码
/***** Selector Hacks ******/
   
/* IE6及更低版本浏览器 */
* html #uno  { color: red }
   
/* IE7 */
*:first-child+html #dos { color: red } 
   
/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }
   
/* IE8, FF, Saf, Opera (除了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  }
   
/* 除了ie 6-8的所有浏览器 */
:root *> #quince { color: red  }
   
/* IE7 */
*+html #dieciocho {  color: red }
   
/* Firefox. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }
   
/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }
   
/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }
   
   
/***** Attribute Hacks ******/
   
/* IE6 */
#once { _color: blue }
   
/* IE6, IE7 */
#doce { *color: blue; /* o或者 #color: blue */ }
   
/* 所有浏览器,除了 IE6 */
#diecisiete { color/**/: blue }
   
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
   
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
   
/* IE6, IE7 -- 和!important作用相同 */
#veintesiete { color: blue !ie; } /* 感叹号后边可以是任意字符串 */
   
/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* 必须放在所有规则的最后面 */

建议继续学习

  1. 12款很棒的浏览器兼容性测试工具推荐 (阅读 6,144)
  2. 简单的全系列浏览器css hack (阅读 5,562)
  3. IE 颜色 Hack全收集 (阅读 5,064)
  4. IE10 CSS hack (阅读 4,745)
  5. Javascript和CSS浏览器兼容总结 (阅读 4,680)
  6. 兼容所有浏览器的设为首页与显示小策略 (阅读 3,922)
  7. 如何更改字段至兼容的不同类型 (阅读 3,841)
  8. 定位元素间的Z值比较及z-index在不同浏览器下默认值的影响 (阅读 3,683)
  9. 抛弃 CSS Hacks 后的浏览器兼容方案 (阅读 2,964)
  10. 抛弃 CSS Hacks 后的浏览器兼容方案 (阅读 2,623)