术语汇编 深入剖析CSS hack工作原理

开发 前端
CSS hack由于不同的浏览器,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,这个时候我们就需要针对不同的浏览器去写不同的CSS,这个过程就叫CSS hack,也叫写CSS hack。

本文向大家描述一下CSS hack的原理以及书写方法,我们需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果,这个过程就叫做CSS hack。

CSS hack简介

CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。

CSS Hack的原理是什么

  由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。   

比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识等等 。  

书写顺序,一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。

如何写CSS Hack

  比如要分辨IE6和firefox两种浏览器,可以这样写: 

  1. <style>     
  2. div{     
  3. background:green; /* for firefox */     
  4. *background:red; /* for IE6 */     
  5. }     
  6. </style>    

我在IE6中看到是红色的,在firefox中看到是绿色的。  
 
解释一下:

上面的CSS在firefox中,它是认识不了后面的那个带星号的东东是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。  
在IE6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;background:red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。

【编辑推荐】

  1. CSS Hack工作原理及编写方式
  2. CSS HACK和浏览器兼容问题的解决方法
  3. 深入探究DIV CSS布局中position属性用法
  4. CSS属性display:inline-block使用揭秘
  5. Firefox、IE7、IE6浏览器兼容问题概念解析
责任编辑:佚名 来源: hi.baidu.com
相关推荐

2010-05-13 15:38:19

Subversion

2010-09-13 13:27:25

CSS滤镜

2010-05-14 17:24:55

Subversion编

2010-07-05 09:59:27

UML类关系图

2010-07-13 10:21:19

2010-09-17 09:19:08

Java API

2010-06-07 13:02:46

Hadoop简介

2010-08-05 14:51:36

AdobeFlex

2010-07-20 16:25:50

Perl正则表达式

2010-07-13 09:02:16

Perl

2010-06-11 18:27:39

UML对象图

2010-07-30 10:23:46

Flex数据绑定

2010-06-11 09:33:47

UML顺序图

2010-06-29 15:06:14

UML建模

2010-09-26 17:04:48

JVMJava虚拟机

2010-07-08 09:50:11

UML构件图

2010-07-19 16:56:56

Perl线程

2010-07-26 16:54:15

Perl引用

2010-06-10 18:27:00

UML语言

2010-07-27 08:59:19

FlexBuilder
点赞
收藏

51CTO技术栈公众号