刚更新的csshack技巧_html/css_WEB-ITnose

1概念：

不同的浏览器对CSS的解析效果不同，为了达到相同的效果，就得根据不同浏览器写不同的css

2规则：

　CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对IE浏览器。

　类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等　　

选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等　　

HTML头部引用(if IE)Hack：针对所有IE：，针对IE6及以下版本：这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

书写顺序，一般是将识别能力强的浏览器的CSS写在后面。

举个栗子：

 background: #f00;   各浏览器都认识，主要给高级浏览器用background: blue\0; 网上说是给IE8的，不过经过测试，IE10、9、8都认识他。background:#F60\0\9;  这个东西是给IE8 玩background: red\9;  这个东西好玩了，所有的ie都认识他。+background: yellow;   *或+ 留给了IE7、6 这一点还是不错的_background:black; _专门留给ie6 :root .test{background: blue\9;} :root是给ie9的，网上流传了个版本是 :root #test { background:blue\0;}，新版opera也认识，所以经过反复验证最终ie9特有的为:root 选择符 {属性\9;}

浏览器内核 Trident Trident Trident Trident Trident Trident Gecko Presto WebKit IE6 IE7 IE8 IE9 IE10 IE11 FF Opera Sarari * T T F F F F F F F _ T F F F F F F F F ！important 见下面详解 T T T T T T T T @cc_on（特性检测）激活条件编译见下面详解见下面详解见下面详解见下面详解

if(/*@cc_on!@*/false){

　　　　　　document.documentElement.className+='ie10';

}

if (/*@cc_on!@*/true) {

document.documentElement.className += ' ie' + document.documentMode;

}

同IE11

\9 T T T T T T F F F \0 F F T T T T F T F \9\0 T，其余F

3标准盒模型：元素宽度=width+padding+border+margin

　　　　　IE: 元素宽度=width+margin(padding和border都包含在width中了)

我们可以通过这种方法在里面加上只想让IE解析的东西，比如css,js,HTML。，其他浏览器会把他们当成注释。

5多类选择符的写法：

#my.c1.c2 { color:red;}.c1.c2 { color:red;}

以上代码在IE6中会被理解为

#my.c2 { color:red;}.c2 { color:red;}

在开发中最好不用多类选择器这样组合，因为IE6会只会读最后一个。
6!important在ie6中

识别：

.demo{ color:red !important; } .demo { color:green; }

www.gxlcms.com

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did108052

更新时间：2022-11-17 阅读：35次