hack是什么

不同浏览器对css的解析是不同是,因此需要css hack来解决浏览器局部的兼容性问题。针对不同浏览器写不同的CSS代码的过程叫CSS  Hack。

常见的hack有三种形式,分别是CSS属性hack,CSS选择符hack,IE条件注释hack,hack主要针对IE浏览器。

CSS属性hack:如IE6能识别"_"和"*",IE7能识别"*",不能识别"_",firefox两个都不能识别。

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

_color:red;//IE6识别

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

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

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

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

color:red\9;//IE6、IE7、IE8、IE9识别

color:red\0;//IE8、IE9识别

color:red\9\0;//IE9识别

color:red \0;//IE9识别

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

CSS选择符hack:IE6能识别*html.class{},IE7能识别*+html.class{}或者*:first-child+html.class{}。

*html #demo{color:red;} //IE6识别

*+html #demo{color:red;} //IE7识别

body:nth-of-type(1) #demo{color:red}  //IE9、FF3.5+、Chrome、Safari、Opera识别

head:first-child+body #demo{color:red}  //IE7+、FF、Chrome、Sarari、Opera识别

:root #demo{color:red\9} //仅IE9识别

IE条件注释hack:IE条件注释从IE5开始提供的一种非标准逻辑语句只在IE有有效,其他浏览器被当做注释。

<!--[if IE]>IE可见<![endif]-->

<!--[if IE 6]>IE6可见<![endif]-->

<!--[if IE 7]>IE7可见<![endif]-->

<!--[if !IE 7]>IE不可见<![endif]-->

<!--[if gt IE 6]>IE6以上版本可见<![endif]-->

<!--[if gte IE 6]>IE6和IE6以上版本可见<![endif]-->

<!--[if lt IE 7]>IE7以下版本可见<![endif]-->

<!--[if lte IE 7]>IE7和IE7以下版本可见<![endif]-->

<!--[if !IE]>IE不可见<![endif]-->

由于IE6不支持!improtant,ff支持!important,所以用来区分浏览器。

<style type="text/css">

.demo{

color:red !important;

color:green;

}

</style>

<div class="demo">abc</div>

在ie6中字体为绿色,在FF中字体为红色。

注意:在一个选择器里面,!important改变优先级,IE6下是无效的,后面的样式覆盖前面的样式。在有多个选择器的时候,!important有效的。

<style type="texe/css">

.demo{

color:red !important;

}

.demo{

color:green;

}

</style>

<div class="demo">abc</div>

在多选择符的时候也要注意IE6的显示情况:

#name.a1.a2 {color:red};

.a1.a2 {color:red};

在IE7+和FF/OPERA/SAFARI都支持,在IE6上则被理解为:

#name.a2 {color:red};

.a2 {color:red};

前面的类名会被后面的类名覆盖掉。可考虑不用类组合的形式。

本学习内容来源于  前端客 的分享:http://www.qdker.com/archives/138.html

上一篇:ERROR [IM002] [Microsoft][ODBC 驱动程序管理器] 未发现数据源名称并且未指定默认驱动程序


下一篇:vue-cli的webpack模版,相关配置文件dev-server.js与webpack.config.js配置解析