CSS hack
来源:互联网 发布:石家庄seo 编辑:程序博客网 时间:2024/06/05 02:31
什么是CSS hack
由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!
CSS hack的原理
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优先级对浏览器展现效果的影响,我们可以据此针对不同的浏览器情景来应用不同的CSS。
CSS hack分类
CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
- 属性前缀法(即类内部Hack):例如 IE6能识别下划线”_”和星号” * “,IE7能识别星号” * “,但不能识别下划线”_”,IE6~IE10都认识”\9”,但firefox前述三个都不能认识。
- 选择器前缀法(即选择器Hack):例如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。
- IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): ,针对IE6及以下版本: 。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
CSS hack书写顺序,一般是将适用范围广、被识别能力强的CSS定义在前面。
CSS hack方式:
1、条件Hack
<!--[if IE]> <style> .test{color:red;} </style> <![endif]-->
2、属性Hack
.test{ color:#090\9; /* For IE8+ */ *color:#f00; /* For IE7 and earlier */ _color:#ff0; /* For IE6 and earlier */}
3、选择符Hack
* html .test{color:#090;} /* For IE6 and earlier */ * + html .test{color:#ff0;} /* For IE7 */
IE浏览器各版本 CSS hack 对照表
hack写法实例IE6(S)IE6(Q)IE7(S)IE7(Q)IE8(S)IE8(Q)IE9(S)IE9(Q)IE10(S)IE10(Q)**color青色YYYYNYNYNY++color绿色YYYYNYNYNY--color黄色YYNNNNNNNN__color蓝色YYNYNYNYNN##color紫色YYYYNYNYNY\0color:red\0红色NNNNYNYNYN\9\0color:red\9\0粉色NNNNNNYNYN!importantcolor:blue !important;color:green;棕色NNYNYNYNYY说明:在标准模式中
- “-″减号是IE6专有的hack
- “\9″ IE6/IE7/IE8/IE9/IE10都生效
- “\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
- “\9\0″ 只对IE9/IE10生效,是IE9/10的hack
顺便扔个说的比较详细的链接
阅读全文
0 0
- CSS Hack
- CSS Hack
- CSS hack
- css hack
- css hack
- CSS hack
- css hack
- css hack
- Css Hack
- CSS Hack
- css hack
- css hack
- css hack
- CSS Hack
- CSS Hack
- css hack
- css hack
- CSS hack
- 文件
- CSDN 博 小白的第一天
- 手势滑动之玩转onTouchEvent()与Scroller
- 工具篇
- 程序员段子
- CSS hack
- 带你重新认识:Android Splash页秒开 Activity白屏 Activity黑屏
- 待审核?
- bzoj 1663: [Usaco2006 Open]赶集(最长路)
- Ubuntu16.04 上安装openJDK7 编译AndroidM环境
- wps 表格生成条形码或者二维码
- 导航滑动特效
- windows宿主机,ubuntu虚拟机下的上网设置(有线网络和无线网络)
- 圣杯布局