网页制作了解什么是CSS hack?
发布时间:2007-10-21 08:52:00
由于不同的浏览器,比如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两种浏览器,可以这样写:
<style>
div{
background:green; /* for firefox */
*background:red; /* for IE6 */
}
</style>
<div>我在IE6中看到是红色的,在firefox中看到是绿色的。</div>
<style>
div{
background:green; /* for firefox */
*background:red; /* for IE6 */
}
</style>
<div>我在IE6中看到是红色的,在firefox中看到是绿色的。</div>
解释一下:
上面的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;
background:orange;*background:blue;
区别IE6与IE7:
background:green !important;background:blue;
background:green !important;background:blue;
区别IE7与FF:
background:orange; *background:green;
background:orange; *background:green;
区别FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;
background:orange;*background:green !important;*background:blue;
注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
IE6 | IE7 | FF | |
---|---|---|---|
* | √ | √ | × |
!important | × | √ | √ |
另外再补充一个,下划线”_”, IE6支持下划线,IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6,IE7,firefox
div{: background:orange;
*background:green;
_background:blue;}
div{: background:orange;
*background:green;
_background:blue;}
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
猜你喜欢
- 任何一个行业里,当有一头近乎垄断的大象盘踞着的时候,生活在大象身后的蚂蚁们既是悲哀又是幸运的。悲哀的是市场已近乎被大象垄断留给他们的空间已经
- 前几天,看到有人写了个superLink的东东,主要的做什么用呢?我们有时会给在大块元素加个window.location='htt
- 这份代码不是那种时间没有改变也输出innerHTML的高消耗代码。innerHTML和style的改变是非常消耗游览器性能的,如果你将来希望
- 原文:http://www.smashingmagazine.com/ ... emarkable-favicons/翻译:Blank(怿飞
- 现在的垃圾留言越来越智能,并且从留言内容几乎看不出来是垃圾留言,而大量的垃圾留言会导致文章可读性下降,并可能会被搜索引擎惩罚,经过一段时间的
- 为了提高Asp程序的性能,人们常常将经常使用的数据缓存在 Application,但是你修改了数据库后怎么让application更新呢,本
- 这个类主要解决在类型转换时,如果直接使用类型转换函数,会因为变量为空或者格式不对而导致程序报错,而这种报错在大多数情况下是允许的.例如要转换
- Online人们搜索、浏览、阅读、跟帖、互动投票,玩游戏,甚至在线买卖交易。这些行为都是“用户体验”,听起来用户体验似乎无所不能,造成了互联
- 数据库在运行中,会因为人为因素或一些不可抗力因素造成数据损坏。所以为了保护数据的安全和最小停机时间,我们需制定详细的备份/恢复计划,并定期对
- 在web开发中经常遇到多关键词对对单个字段查询,我一般是通过动态数组来实现的。当然多个关键词的一般是用空格或,隔开,我这几假设多个关键词用空
- 删除一,你可以先把类型为varchar的字段该名,再加以个字段为要该为date的字段名相同,二,1,测试表create table TEST
- 调用 <script language="javascript" src="xxx.asp?m
- 一、关于XML解析XML在Java应用程序里变得越来越重要, 广泛应用于数据存储和交换. 比如我们常见的配置文件,都是以XML方式存储的.
- 通常来说,在MyISAM里读写操作是串行的,但当对同一个表进行查询和插入操作时,为了降低锁竞争的频率,根据concurrent_insert
- 原理就是先声明常量,包括列数,行数,各列的属性,然后在程序的其它过程用这些常量来控制Cells。非常方便,便于修改和移植! 以下为窗体整体代
- aspImage是ServerObjects站点上非常好的一个组件,它可以使我们利用Asp实现很多对于图形的处理功能,他的功能强大,如果你需
- 自从HTML5能为我们的新网页带来更高效洁净的代码而得到更多的关注,然而唯一能让IE识别那些新元素(如<article>)的途径
- 有一个网站A想找别的网站作为代理商,在代理商的页面上插入自己的广告。它提供一个注册页面给代理商,代理商注册后,会得到一个ID,
- 最近尝试了mysql的最新版本5.5.581.最新发布的mysql 5.5.8没有适合solaris 9的版本;这个在安装时需要注意2.它发
- location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.hre