本文目录
- css hack方式有哪些
- css hack问题.
- 什么是Css Hackie6，7，8的hack分别是什么
- css hack 是只在头部声明一下就可以了，还是每一个层都必须格外设置
- less怎么写IE8/9的css hack
- IE6、IE7、Firefox如何运用CSS hack
css hack方式有哪些
what由于不同厂商的浏览器或某浏览器的不同版本（IE6~IE11，Firefox/Safari/Opera/Chrome等），对css的支持、解析不一样。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同的版本写特定的css样式，把这个针对不同浏览器/不同版本写相应的css code的过程叫做css hack。how由于不同的浏览器和浏览器的各版本对css的支持及解析结果不一样，以及css优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景应用不同的css。css hack 分类有三种表现形式，css属性前缀法，选择器前缀法，以及IE条件注释法。属性前缀法（即类内部hack）选择器前缀法IE条件注释法css hack一般是将适用范围广，被识别能力强的css定义在前面。css hack方式一：条件注释法（适用于IE10以下，IE10以后不再支持条件注释）gt：greater than，选择条件版本以上版本，不包含条件版本。lt： less than ，选择条件版本以下版本，不包含条件版本。gte：greater than or equal ，选择条件版本以上版本，包含条件版本。lte：less than or equal ，选择条件版本以下版本，包含条件版本。！：选择条件版本以外所有版本，无论高低。条件注释属性：实例
非IE
html脚本中平常的注释方法，条件注释法只有IE10以下的IE浏览器可以识别，对于别的浏览器那么就只能看见的是一对封闭的不起作用的注释。对于非IE 的注释，注意里面有一个是起到封闭注释的作用。css hack方式二：类内属性前缀法属性前缀是在CSS样式属性名上加上一些只有特定浏览器才能识别的hack前缀，已达到预期的页面展现效果。以下讨论的是标准模式中的hack方法规则*color：IE5.5、6、7+color : IE5.5、6、7＃color : IE5.5、6、7-color：IE5.5、6＿color: IE5.5、6这几个当中，我喜欢用＊与 ＿color\0 : IE8、9、10、11（12以上没测）（此处有些地方说欧朋也识别，可是我测试啦，不管用，不知道啊）color\9 : IE6、7、8、9、10（11不支持）color\9\0:IE8、9、10（其他不支持）\9\0取了共集color:red!important;提高该设置的优先级css hack方式三：选择器前缀法规则@media screen\9{……}（只对IE6、7生效）@media \0screen{……}（只对IE8生效）@media \0screen\,screen\9{……}（对IE6,7,8生效）@media screen\0{……}（只对IE8、9、10生效）@media screen and (min-width:0\0){……}（只对IE9，10有效）@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){……}（对IE10,11有效，以上没测）hack 利弊尽量避免使用css hack，但有些情况下，为了顾及用户体验实现向下兼容，不得已才使用hack。但过多使用会造成html文档混乱不堪，增加管理和维护的负担。
css hack问题.
写法不对，!important应写在值后面分号前面：background:blue !important;并且所有主流浏览器都认这种写法，所以此写法并不针对IE；要想专门针对IE，可使用：body {font-family:Verdana; font-size:14px; margin:0; background:red; background:blue \9;}
什么是Css Hackie6，7，8的hack分别是什么
针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。示例如下：#test{Width:300px;Height:300px;background-color:blue}#test{width:300px;height:300px;background-color:blue; /*firefox*/background-color:red\9; /*all ie*/background-color:yellow; /*ie8*/+background-color:pink; /*ie7*/_background-color:orange; /*ie6*/ }:root #test { background-color:purple\9; } /*ie9*/@media all and (min-width:0px){ #test {background-color:black;} } /*opera*/@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
css hack 是只在头部声明一下就可以了，还是每一个层都必须格外设置
最好格局图层设置"_" IE6专属hack“+” IE7专属hack"*" IE因此一般我们区别这些浏览器CSS hack的方法就变得简单，我们只需考虑IE6\IE7\火狐（Firefox）这3个浏览器即可兼容全部浏览器。具体区别如下：区别IE6与FF：background:orange;*background:blue;区别IE6与IE7：background:green !important;background:blue;区别IE7与FF：background:orange; *background:green;区别FF，IE7，IE6：background:orange;*background:green !important;*background:blue;注：IE都能识别*;标准浏览器(如FF)不能识别*；IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;以下是各浏览器CSS hack表格 IE6 IE7 FF * √ √ × !important × √ √ 另外再补充一个，下划线"_",IE6支持下划线，IE7和firefox均不支持下划线。于是大家还可以这样来区分IE6，IE7，firefox: background:orange;*background:green;_background:blue;注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。以上是介绍区别各浏览器的CSS hack的写法，下面我们简单介绍这些CSS hack用法：要求说明：假如我们设置一个类名为exple的类CSS属性,CSS样式边框为1PX黑色边框，高度为100PX并要求，在IE6浏览器下宽度为100PX；IE7浏览器宽度下为150PX；火狐IE8谷歌浏览器下宽度为200PX；(PX是长度单位像素)则CSS代码如下：.exple{border:1px solid #000; height:100px;width:200px; *width:150px !important; *width100px;}这样只要在html设置一个div的类(class="exple"),这样这部分在火狐、IE8、谷歌浏览器下就会显示宽度为200px高度为100px带1px的黑边框的方块；IE7浏览器宽度下为150PX高度为10
less怎么写IE8/9的css hack
@ie8-10-fix:~"\9\0";.ie8_height(@h){height:@h*1px@ie8-10-fix;}
IE6、IE7、Firefox如何运用CSS hack
之前我一直用的是这样：XML/HTML代码background:orange;*background:green!important;*background:blue;现在又记录下另一种方法：XML/HTML代码height:20px;/*ForFirefox*/*height:25px;/*ForIE7&IE6*/_height:20px;/*ForIE6*/说明一下：在ie6和firefox环境中测试可以正常显示，并成功的应用了hack技术。但是新近发布的ie7对!important可以正确解释，页面没有能够按要求显示！现在找到一个针对IE7不错的hack方式：使用“*+html”！现在用IE7浏览一下，应该没有问题了。示例如下：XML/HTML代码ExampleSourceCode#example{color:#333;}/*Moz*/*html#example{color:#666;}/*IE6*/*+html#example{color:#999;}/*IE7*/那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999，并且它们互不干扰！这样处理也可以，而且适用于行内写法（《divstyle="...................."》）：XML/HTML代码width:100px;/*Mozilla*/+width:110px;/*IE7*/_width:120px;/*IE6*/顺序不能破坏，因为越往下越能兼容上面的，就是说IE6认得“+”。
