文档章节

各种浏览器CSS Hack的原理是什么?

webas
 webas
发布于 2013/04/20 22:32
字数 1645
阅读 244
收藏 27

CSS Hack的原理是什么

由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的 浏览器来写不同的CSS。
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{}。等等
HTM [1]L头部引用(if IE)Hack:针对所有IE:<!--[if IE]><!--您的代码--><![endif]-->,针对IE6及以下版本:<!--[if lt IE 7]><!--您的 代码--><![endif]-->,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
书写顺序,一般是将识别能力强的浏览器的CSS写在前面。下面如何写里面说得更详细些。

如何写CSS Hack

比如要分辨IE6和firefox两种浏览器,可以这样写:
<style>
div{
background:green; /* for firefox */
*background:red; /* for IE6 */ (both IE6 && IE7)
}
</style>
我在IE6中看到是红色的,在firefox中看到是绿色的。
解释一下:
上面的css在firefox中,它是认识不了后面的那个带星号的东东是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
在IE6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;background:red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。
CSS hack:区分IE6,IE7,firefox
区别不同浏览器,CSS hack写法:
区别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;_background:blue;
background:orange;*background:green !important;*background:blue;
注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*;不能识别 !important;
IE7能识别*,能识别!important;
FF不能识别*,但能识别!important;
IE6 IE7 FF
* √ √ ×
!important √
√ √
浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6
以: " #demo {width:100px;} "为例;
#demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/
* html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
*+html #demo {width:130px;} /*会被IE7执行*/
所以最后,#demo的宽度在三个浏览器的解释为: FIREFOX:100px; ie6:120px; ie7:130px;
IE8 最新css hack:
"\9" 例:"border:1px \9;".这里的"\9"可以区别所有IE和FireFox.
"\0" IE8识别,IE6、IE7不能.
"*" IE6、IE7可以识别.IE8、FireFox不能.
"_" IE6可以识别"_",IE7、IE8、FireFox不能.

IE6 hack

_background-color:#CDCDCD; /* ie 6*/

IE7 hack

*background-color:#dddd00; /* ie 7*/

IE8 hack

background-color:red \0; /* ie 8/9*/

IE9 hack

background-color:blue \9\0;

火狐,遨游,及其它高级浏览器通用

background-color:red!important;
注意写hack的顺序,其中:
background-color:red\0;IE8和IE9都支持;background-color:blue\9\0; 仅IE9支持;
另外,background-color:eeeeee\9;的HACK支持IE6-IE8,但是IE8不能识别“*”和“_”的CSS HACK。
可综合上述规律灵活应用。

IE9 和 IE8 以及其他版本的区别说明

background-color:blue; 各个浏览器都认识,这里给firefox用;
background-color:red\9;\9所有的ie浏览器可识别;
background-color:yellow\0; \0 是留给ie8的,最新版opera也认识,后面自有hack写了给opera认的,所以,\0我们就认为是给ie8留的;
+background-color:pink; + ie7定了;
_background-color:orange; _专门留给神奇的ie6;
:root #test { background-color:purple\9; } :root是给ie9的,网上流传了个版本是 :root #test { background- color:purple\0;},这个,新版opera也认识,所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera,必须加个\0,不然firefox,chrome,safari也都认识。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

选择符级Hack

CSS内部选择符级Hack

语法

<hack> selector{ sRules }

说明

选择不同的浏览器及版本
尽可能减少对CSS Hack的使用。 Hack有风险,使用需谨慎
通常如未作特别说明,本文档所有的代码和示例的默认运行环境都为标准模式。
一些CSS Hack由于浏览器存在交叉认识,所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。
简单列举几个:
* html .test{color:#090;} /* For IE6 and earlier */
* + html .test{color:#ff0;} /* For IE7 */
.test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */
.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */

内部属性Hack

CSS内部属性级Hack
语法:selector{<hack>?property:value<hack>?;}
取值:
_: 选择IE6及以下。连接线(中划线)(-)亦可使用,为了避免与某些带中划线的属性混淆,所以使用下划线(_)更为合适。
*:选择IE7及以下。诸如:(+)与(#)之类的均可使用,不过业界对(*)的认知度更高。
\9:选择IE6+。
\0:选择IE8+和Opera。
[;property:value;]; 选择webkit核心浏览器(Chrome,Safari)。IE7及以下也能识别。中括号内外的3个分号必须保留,第一个分号前可以是任意规则或任意多个规则。 [;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。生效的始终是中括号内的最后一条规则,所以通常选用第一种写法最为简洁。
说明:一些CSS Hack由于浏览器存在交叉认识,所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。如下面这个例子:如想同一段文字在IE6,7,8,chrome,safari,显示为不同颜色,可这样写 [2]
.test{
color:#000; /* 正常写法普遍支持 */
color:#00F\9; /* 所有IE浏览器(ie6+)支持 */
/*但是IE8不能识别“ * ”和“ _ ” */
[color:#000;color:#0F0; /* SF,CH支持 */
color:#00F\0; /* IE8支持*/
*color:#FF0; /* IE7支持 */
_color:#F00; /* IE6支持 */
}
注意了:[2]不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
补充:IE6能识别 *,但不能识别 !important,IE7能识别 *,也能识别!important;FF不能识别 *,但能识别!important;下划线”_“,IE6支持下划线,IE7和firefox均不支持下划线 [2]

本文转载自:http://baike.baidu.com/view/1119452.htm

共有 人打赏支持
webas
粉丝 7
博文 42
码字总数 7650
作品 0
广州
架构师
加载中

评论(1)

邪云子
邪云子
很痛苦
Web标准中兼容问题的解决学习笔记

一、 兼容问题产生的原因 各种浏览器是由不同的公司开发的 浏览器不断的更新换代 二、 兼容问题的解决 使用不会出现兼容问题的属性 使用CSS hack 条件注释 使用不会出现兼容问题的属性 使用C...

雪之丞
2013/02/20
0
0
css编程规范-借鉴kissy

css校验 除了css hack和浏览器私有属性,推荐使用 w3c validation service校验其余的代码 代码规范 一般性命名 使用小写字母,复合词使用-分隔 id和类的命名 为id和样式类使用有意义或者通用...

bosscheng
2013/09/23
0
0
web前端工作中遇到的问题(持续更新···)

我们公司PC端兼容IE8,安卓兼容4.2,iOS兼容8.0 浏览器兼容 IE注释 工作中时常会用到 CSS兼容 1.CSS hack 具体内容,狠狠点这里! 2.透明度兼容 使用半透明滤镜 等同 3.rgba兼容问题 不能使用...

George_blaine
06/15
0
0
判断浏览器(IE)版本,html方式和js方式

一、通过html判断 除IE外都可识别 Ite:less than or equal to意思是小于或等于IE6浏览器,用于IE浏览器的条件注释,常用于CSShack,针对IE的JS等。在进行WEB标准网页的学习和应用过程中,网...

雄关漫道-LN
2016/11/02
72
0
一个初级的前端工程师需要知道些什么?

一个初级的前端工程师需要知道些什么? 按照我的想法,我把前端工程师分为了入门、初级、中级、高级这四个级别入门级别指的是了解什么是前端(前端到底是什么其实很多人还是不清楚的,底什么...

MyDear宸
2017/05/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
31分钟前
0
0
AVA中CAS-ABA的问题解决方案AtomicStampedReference

了解CAS(Compare-And-Swap) CAS即对比交换,它在保证数据原子性的前提下尽可能的减少了锁的使用,很多编程语言或者系统实现上都大量的使用了CAS。 JAVA中CAS的实现 JAVA中的cas主要使用的是...

码代码的小司机
33分钟前
1
0
Android JNI开发系列(十三) JNI异常处理

JNI 异常处理 JNI异常与JAVA处理异常的区别 JAVA 有异常处理机制,而JNI没有 如果JAVA中异常没有捕获,后面的代码不会执行,JNI会执行 JAVA编译时的异常,是在方法显示的声明了某一个异常,编...

蔡小鹏
46分钟前
2
0
简单介绍Java 的JAR包、EAR包、WAR包区别

WAR包 WAR(Web Archive file)网络应用程序文件,是与平台无关的文件格式,它允许将许多文件组合成一个压缩文件。War专用于Web方面。大部分的JAVA WEB工程,都是打成WAR包进行发布的。 War是...

Linux就该这么学
今天
1
0
Qt那些事0.0.7

在帮助文档(Overview - QML and C++ Integration)中随缘遇到一张图,是关于C++对象与QML整合介绍的,值得标记下来,虽然大部分功能也有所涉猎,但是还是留个记号,万一哪天我失忆了还想写Q...

Ev4n
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部