用CSS Hack解决浏览器兼容性问题
来源:互联网 发布:wdcp php版本升级 编辑:程序博客网 时间:2024/04/30 23:18
对于网站前台设计师来说,众多浏览器间的CSS兼容问题从来都是非常棘手的。由于不同的浏览器(常见的包括IE6,IE7,Firefox等)对CSS的解析和认知的不同,严重造成了浏览器页面效果的不一致,使得我们在进行DIV+CSS页面排版时,不得不时刻考虑到常见浏览器间的CSS兼容性问题。
什么是CSS Hack呢?为解决浏览器间的CSS兼容性问题,设计师们针对不同浏览器写不同的CSS code的过程,就是一个Hack的过程了。在这个过程中,不但要做到浏览器的兼容性,更要合理地做到CSS代码的绝对优化,尽可能少地人为制造冗余的代码,使CSS代码尽可能简练易读也是非常重要的工作之一。
为什么要用CSS Hack呢?答案很简单,通过对CSS代码的兼容性问题的解决,使得我们写出的页面能在不同的浏览器中达到统一的页面效果。不会出现IE浏览器中完好的页面拿到FF中去就横七竖八千疮百孔的事情。
CSS Hack的原理是什么?根据不同浏览器对CSS样式的支持程度,解析结果和识别CSS的优先级不同,设计师们就可以根据这些不同浏览器的特点来书写不同的CSS样式代码。IE6能识别下划线_和星号*,IE7能识别星号*,不能识别下划线_,而firefox两个都不能识别,如此,就可以针对IE6.IE7和FF通过对这些特殊符号的使用写不同的代码了。
<style>
div{
background:green; /* for FireFox */
*background:red; /* for IE7 */
_background:blue; /* for IE6 */
}
</style>
该样式显示的效果是:在FireFox中背景色为green;在IE7中背景色为red;在IE6中背景色为blue。
CSS解析的过程:CSS读取的顺序是由上至下,由左至右。在FireFox下,FireFox不能识别*和_,将下面的两行代码过滤掉不作任何解析,执行background:green;完后结束;在IE7下的解析结果为div{ background:green; *background:red; },根据CSS的优先级可以确定后面出现的样式会优先于前者被调用,即实现*background:red;的解析;在IE6下,因为三种样式代码都可以解析,解析结果为div{ background:green; *background:red; _background:blue;},但同样根据CSS的优先级,只会把最后一个样式读取,即_background:blue;被应用。
此外,!important声明也可以很好地提升指定样式规则的应用优先权。在IE6和FF中用!important声明可以提高优先级别,但在IE6中的!important声明会被之后的同名属性定义替换。所以,通过*和!important声明两者的搭配也可以很好地解决IE6,IE7和FF三者之间的兼容性问题。
区别IE6与FF:background:red; *background:blue;
区别IE6与IE7:background:green !important;background:blue;
区别IE7与FF:background:red; *background:green;
区别FF,IE7,IE6:background:red; *background:green !important; *background:blue;
注:IE都能识别*;FF不能识别*;IE6能识别*,但不能识别 !important;IE7能识别*,也能识别!important;FF不能识别*,但能识别!important;
IE6IE7FF*√√×!important×√√书写的顺序都是FireFox的写在前面,IE7的写在中间,IE6的写在最后面。
对于浏览器的兼容性的问题主要是padding/margin/width三个属性引起的,所以,在书写CSS样式时,协调好这三者的问题,对于CSS Hack有好大的好处。比如对于<div id=”content”><ul><li><a href=”#”>text</a></li></ul></div>这样一个层叠样式:<style> #content{ width:200px} #content ul{ margin:10px}</style>,在设计过程中,应尽量减少对content外层DIV盒子使用padding声明,而是通过对其内的块元素ul进行margin定义代替对外层DIV的padding定义。
- 用CSS Hack解决浏览器兼容性问题
- CSS Hack解决浏览器兼容性问题
- CSS hack技术解决浏览器兼容性问题
- 【Web Trick 2】CSS HACK 解决浏览器兼容性问题
- css解决浏览器兼容性问题
- css 浏览器兼容性问题解决
- web 开发笔记“CSS hack大全之特殊符号的应用解决浏览器兼容性问题”
- 解决浏览器兼容性问题CSS(一)
- CSS】怎么解决浏览器兼容性问题
- css hack兼容性问题
- 关于css hack在浏览器兼容性问题上的使用
- CSS HACK IE6、IE7、IE8、Firefox解决兼容性问题
- 重新整理 CSS HACK 解决浏览器兼容
- CSS Hack技术解决多浏览器兼容问题
- CSS hack IE常见兼容性问题
- 解决css firefox火狐浏览器IE浏览器下的兼容性问题
- 各浏览器CSS hack
- css hack, 浏览器 选择
- 支持输入法变更事件的InputPanel
- 积分积分
- oracle修改SGA后无法启动的临时解决方法
- 如何把7771网址大全删除
- ROMIMAGE工具解析(ARM平台)
- 用CSS Hack解决浏览器兼容性问题
- 验房流程
- 收藏几本linux编程的书,需要的时候一本本买回来
- Windows Mobile获取存储卡容量及使用情况
- 条件指令
- struts2使用json时需要注意的问题
- QTP-实现对文本文件的读写
- 快速获得Google Chrome最新版本
- SQL区分大小写