CSS浏览器兼容方案
来源:xxcss.com 发布时间:2008-06-10 12:21:00
网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了,因为IE 6.0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同,导致设计的页面效果不一样,所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢?广泛被使用的方法就是CSS Hack,即使用特别的CSS定义显示网页在不同浏览器的设计风格,针对不同的浏览器去写不同的CSS,最大化兼容浏览器。
一般情况下,我都会兼顾IE 6.0 / IE 7.0 / firefox 2.0浏览器,下面是用的较频繁的CSS Hack技巧:
用的最广莫过于!important了, 它可以针对IE(IE 7.0能正确理解!important)和非IE浏览器设置不同的样式,只要在非IE浏览器样式的后面加上!important,就可以针对其优先了。所以为了兼顾IE 6.0与火狐之间的差异,我都会使用!important。
1、仅IE7与IE5.0可以识别
*+html select {…}
当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。
2、仅IE7可以识别
*+html select {…!important;}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
3、IE6及IE6以下识别
* html select {…}
这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
4、html/**/ >body select {…}
这句与上一句的作用相同。
5、仅IE6不识别,屏蔽IE6
select { display /*屏蔽IE6*/:none;}
这里主要是通过CSS注释分开一个属性与值,注释在冒号前。
6、仅IE6与IE5不识别,屏蔽IE6与IE5
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5
7、仅IE5不识别,屏蔽IE5
select/*IE5不识别*/ {…}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别,IE5.5可以识别。
8、盒模型解决方法
selct {width:IE5.x宽度; voice-family :”\”}\”"; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
9、只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。
以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。
10、IE5.x的过滤器,只有IE5.x可见
@media tty {
i{content:”\”;/*” “*/}} @import ‘ie5win.css’; /*”;}
}/* */
11、IE5/MAC的过滤器,一般用不着
/*\*//*/
@import “ie5mac.css”;
/**/
--------------------------------------------------------------------
12、IE的if条件Hack
<!--[if IE]> Only IE <![endif]--> 所有的IE可识别
<!--[if IE 5.0]> Only IE 5.0 <![endif]--> 只有IE5.0可以识别
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]--> IE5.0包换IE5.5都可以识别
<!--[if lt IE 6]> Only IE 6- <![endif]--> 仅IE6可识别
<!--[if gte IE 6]> Only IE 6/+ <![endif]--> IE6以及IE6以下的IE5.x都可识别
<!--[if lte IE 7]> Only IE 7/- <![endif]--> 仅IE7可识别
-----------------------------------------------------------------
你在写css时样式表加上浏览器标识符就行了,各浏览器区别如下:
IE都能识别*,标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important;
IE7能识别*,也能识别 !important;
FF不能识别*,但能识别 !important;
例如style="*width:10px;!important width:20px;"
这样在IE6下宽度为10px,在IE7下宽度时20px
-----------------------------------------------------------------
最新的CSS兼容方案,让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了。
.e {/*FF OP*/
background-color: #FF0000
}
html* .e{/*Sa IE7 OP*/
background-color:#FF00FF
}
*+html .e{
background-color:#000000;/*OP*/
*background-color:#0000FF;/*IE7*/
}
* html .e{/*IE6*/
background-color:#00FFFF
}
经FF2、OP9.21、OP9.10、Sa3.0.3(pc)、IE7、IE6测试通过,如果你在其他的浏览器版本上测试过,欢迎给我留言,把结果告诉我。
需要注意的是:IE7对样式的解释跟DTD是有关,在没有DTD的时候,IE7是能读取IE6的hack的。
猜你喜欢
- 无法打开用户默认数据库,登录失败,这也是SQL Server使用者熟悉的问题之一。在使用企业管理器、查询分析器、各类工具和应用软件的时候,只
- 首先要把php_iconv.dll和inconv.dll COPY到c:\winnt\system32下,直接上代码:<?define
- 自定义数据库自动编号初始值和步进值问题: 如何定义数据库的自动编号字段的初始值和步进值?如何定义自动增加字段的初始值和步进值?如何使删除过数
- ASP里两种常用的生成文件的方式是:利用ADODB.Stream生成文件和利用Scripting.FileSystemObject(fso)
- 当今,有一点可以肯定的是,设计的领域在扩大,这是一个需要设计的世界。拒最新的统计资料显示,中国目前已有正规的设计学院教学机构700多所,并且
- 把昨天做的高级查询界面完善了一下,支持动态添加多个查询条件、定义逻辑关系,支持整形、浮点、字符串、日期、布尔值、自定义选择列表的录入,通过E
- 国外纷纷传言IE8将是Internet Explorer的最后一个版本,这个猜测来源于Microsoft的CEO Steve
- 高效的css写法中的一条就是使用简写。通过简写可以让你的CSS文件更小,更易读。而了解CSS属性简写也是前端开发工程师的基本功之一。今天我们
- 请教:如何在现存的文档中动态嵌入一段JS?如果是一段CSS呢?创建一个<script></script>并在scri
- 准备在以后制作的网站中尝试一些变化,比如:先提交内容,后提示注册/登陆。感觉这样可以绑架更多用户……不想注册再发言?那就先让你上钩发言,然后
- MYSQL数据库以它短小、方便、速度快、免费等优点成为很多网站目前首选数据库,但一般都是用PHP+MYSQL相结合来开发各种动态页面,其实A
- 现在IE7已经推出一段时间并且渗透到用户当中,不用等太久我们就可以在页面上使用更高级的CSS。两个最有用的项目将是 Child子和Adjac
- 用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知道你是否也跟我一样?看1个简单的CSS:DIV#divBox p span.red
- 问题描述时间在我们日常的代码编写中会是经常出现的筛选或排序条件,尤其是一些特殊时间节点的时间显得尤为突出,例如昨天,当前日期,当前月份,当前
- AddHeaderAddHeader 方法用指定的值添加 HTML 标题。该方法常常向响应添加新的 HTTP 标题。它并不替代现有的同名标题
- 删除重复记录,将TABLE_NAME中的不重复记录保存到#TABLE_NAME中select distinct&nbs
- MySQL内建复制功能来优化可用性,在Soundbreak我们每天24小时不间断地播放实况音频和视频,所以对于MySQL的新增的复制特性,我
- 某些杀毒软件会把正常的asp文件误认为是asp木马文件,而自动删除,影响正常使用。下面方法可能会有效避免被杀毒软件删除把dim t
- 实际参数在函数中我们可以使用 arguments 对象获得 (注:形参可通过 arguments.callee 获得),虽然 argumen
- 如何在线创建新表?下面我们以建立一个数码相机库用表为例,看看在ASP程序代码中使用 [CREATE TABLE 相机 (品牌 TEXT(10