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:<!--[if IE]><!--您的代码--><![endif]-->,针对IE6及以下版本:<!--[if lt IE 7]><!--您的代码--><[endif]-->这类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(/*@[email protected]*/false){ document.documentElement.className+=‘ie10‘; } |
if (/*@[email protected]*/true) { document.documentElement.className += ‘ ie‘ + document.documentMode; } |
同IE11 |
同IE11 |
同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中了)
4<!--[if IE]><![endif]-->
<!--[if IE]><link href="ie_styles.css" rel="stylesheet" type="text/css" /><![endif]-->我们可以通过这种方法在<!--[if IE]><![endif]-->里面加上只想让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中
识别:
<style type="text/css"> .demo{ color:red !important; } .demo { color:green; } </style> <div class="demo">www.jb51.net</div>
不识别:
<style type="text/css"> .demo{ color:red !important; color:green; } </style> <div class="demo">www.jb51.net</div>
也就是说在在一个选择器中利用!important改变样式的优先级是没有用的,在不同选择器中又是可以的。
7关于ie8-9:请注意一些细小的差别:
background-color:red\0;IE8和IE9都支持; background-color:blue\9\0; 仅IE9支持;
background: red\9; /*所有的 ie*/ :root .test{background: red\9;} /*ie9*/
[email protected]_on 语句的用法
/*@cc_on @*/ /*@ document.write("JScript version: " + @_jscript_version + "."); document.write(" "); @if (@_win32) document.write("Running on the 32-bit version of Windows."); @elif (@_win16) document.write("Running on the 16-bit version of Windows."); @else document.write("Running on a different operating system."); @end @*/