现在的位置: 首页 > web前端 > 正文

css hack原理及常用hack

2020年07月09日 web前端 ⁄ 共 902字 ⁄ 字号 评论关闭

  不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSSHack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS代码的过程,就叫CSSHack。


  CSSHack常见的有三种形式


  CSS属性Hack、CSS选择符Hack以及IE条件注释Hack,Hack主要针对IE浏览器。


  1、属性级Hack:比如IE6能识别下划线”_”和星号”*“,IE7能识别星号”*“,但不能识别下划线”_”,而firefox两个都不能认识。


  2、选择符级Hack:比如IE6能识别*html.class{},IE7能识别*+html.class{}或者*:first-child+html.class{}。


  3、IE条件注释Hack:IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。比如针对所有IE:<!–[ifIE]><!–您的代码–><![endif]–>,针对IE6及以下版本:<!–[ifltIE7]><!–您的代码–><![endif]–>,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。


  PS:条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。


  常用的CSSHack


  代码如下:


  /*CSS属性级Hack*/


  color:red;/*所有浏览器可识别*/


  _color:red;/*仅IE6识别*/


  *color:red;/*IE6、IE7识别*/


  +color:red;/*IE6、IE7识别*/


  *+color:red;/*IE6、IE7识别*/


  [color:red;/*IE6、IE7识别*/


  color:red9;/*IE6、IE7、IE8、IE9识别*/


  color:red;/*IE8、IE9识别*/


  color:red9;/*仅IE9识别*/


  color:red;/*仅IE9识别*/


  color:red!important;/*IE6不识别!important*/


  

【上篇】
【下篇】

抱歉!评论已关闭.