Home > Web Front-end > HTML Tutorial > Newly updated css hack skills_html/css_WEB-ITnose

Newly updated css hack skills_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:44:23
Original
1140 people have browsed it

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及以下版本:<[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;} 
Copy after login

浏览器内核 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

同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

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

5多类选择符的写法:

#my.c1.c2 { color:red;}.c1.c2 { color:red;}
Copy after login

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

#my.c2 { color:red;}.c2 { color:red;}
Copy after login

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

识别:

<style type="text/css"> .demo{ color:red !important; } .demo { color:green; } </style> <div class="demo">www.jb51.net</div> 
Copy after login

不识别:

<style type="text/css">.demo{color:red !important;color:green;}</style><div class="demo">www.jb51.net</div>
Copy after login


也就是说在在一个选择器中利用!important改变样式的优先级是没有用的,在不同选择器中又是可以的。

7关于ie8-9:请注意一些细小的差别:

background-color:red\0;IE8和IE9都支持;background-color:blue\9\0; 仅IE9支持;
Copy after login

background: red\9; /*所有的 ie*/:root .test{background: red\9;} /*ie9*/
Copy after login


8@cc_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.");@elsedocument.write("Running on a different operating system.");@end@*/
Copy after login

 

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template