关于CSS Hack

        因为不一样厂商的浏览器,好比Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不一样版本,如IE6和IE7,对CSS的解析认识不彻底同样,致使生成的不是咱们所须要的页面效果。 这个时候咱们就须要针对不一样的浏览器去写不一样的CSS,让它可以同时兼容不一样的浏览器,在不一样的浏览器中也能获得咱们想要的页面效果。css

        简单的说,CSS hack的目的就是使你的CSS代码兼容不一样的浏览器。固然,咱们也能够反过来利用CSS hack为不一样版本的浏览器定制编写不一样的CSS效果。html

        啥?还木明白?就是说同一个效果你要根据不一样的浏览器写不一样的css 代码!如今主要就是针对IE浏览器了。浏览器

        原理:使用CSS属性的优先级来实现CSS Hack。编码

        CSS Hack书写顺序,通常是将适用范围广、被识别能力强的CSS定义在前面。spa

        CSS Hack的实现方式:firefox

一、CSS 类内部Hackhtm

        经过 属性和值的前缀或后缀来实现浏览器版本的识别。文档

        例如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",IE6~IE10都认识"\9",但firefox前述三个都不能认识。io

二、选择器Hack原理

        在 浏览器前加前缀来实现不一样的浏览器版本的识别。

    * : 识别IE6

    *+ 前缀: 识别IE7

        ex:

        *div{

        

         }

三、HTML头部引用Hack(掌握)

 原理:使用 IE的条件注释来完成浏览器版本的判断(注:IE10+已经再也不支持条件注释)。

语法:

<!--[if 条件 IE 版本]>

知足浏览器版本时要执行的操做

<![endif]-->

版本:6-10,若是省略版本号的话,则判断是否为IE

<!--[if IE 6]>

只在IE6中要执行的操做

<![endif]-->

条件:

一、gt

判断当前浏览器版本是否大于指定版本

二、gte

判断当前浏览器版本是否大于等于指定版本

三、lt

判断当前浏览器版本是否小于指定版本

四、lte

判断当前浏览器版本是否小于等于指定版本

五、!

非,取反,不是

判断当前浏览器版本是否不等于指定版本

六、不写

判断浏览器是否为IE或IE的指定版本

CSS hack利弊

        通常状况下,咱们尽可能避免使用CSS hack,可是有些状况为了顾及用户体验实现向下兼容,不得已才使用hack。好比因为IE8及如下版本不支持CSS3,而咱们的项目页面使用了大量CSS3新属性在IE9/Firefox/Chrome下正常渲染,可能就得让IE8-的专属hack出马了。使用hack虽然对页面表现的一致性有好处,但过多的滥用会形成html文档混乱不堪,增长管理和维护的负担。相信只要你们一块儿努力,少用、慎用hack,将来必定会促使浏览器厂商的标准愈来愈趋于统一,顺利过渡到标准浏览器的主流时代。抛弃那些陈旧的IE hack,必将减轻咱们编码的复杂度,少作无用功。

相关文章
相关标签/搜索