网页重构中区分IE6、IE7、IE8及标准浏览器的最佳方法
来源:互联网 发布:c语言标志变量 编辑:程序博客网 时间:2024/06/13 13:40
http://lightcss.com/best-way-to-different-browser-for-css/
由于万恶的IE(尤其指IE6和IE7),我们在页面重构时不免要对其进行各种bug修复及差异化处理。在标准浏览器中可实现的效果在IE里却有各种离奇问题,例如IE6、IE7不能良好应对的inline-block和.clearfix问题,好在大部分问题已经有了足够的总结和途径。废话不多说,下面是一些方法区分浏览器的方法和我的看法。
主要途径
CSS Hack
直接在CSS文件中写CSS Hack是非常直观的区分方法。区分不同IE版本的hack代码为
#content{background:red; /* 所有浏览器 */background:orange\9; /* 所有IE浏览器 */*background:yellow; /* IE7和IE6 */+background:green; /* IE7 */_background:blue; /* IE6 */}
还有一些hack不太实用,就不一一列举了。
CSS Hack的缺点是CSS文件无法通过W3C验证,代码阅读时会很奇怪。
条件注释CSS文件
条件注释是写在html里的只会被IE识别的代码,一般在<head>区域通过不同的条件注释导入不同的CSS,不同的IE浏览器会引用不同的CSS。下面的4段注释依次表示"在IE下使用"、“低于IE8时使用”、“IE7时使用”、“IE6时使用”:
<!--[if IE]><link rel="stylesheet" href="/ie-all.css" type="text/css" media="screen" /><![endif]--><!--[if lt IE 8]><link rel="stylesheet" href="/ie.css" type="text/css" media="screen" /><![endif]--><!--[if IE 7]><link rel="stylesheet" href="/ie7.css" type="text/css" media="screen" /><![endif]--><!--[if IE 6]><link rel="stylesheet" href="/ie6.css" type="text/css" media="screen" /><![endif]-->
由于IE8下CSS问题较少,一般只需要为IE6、7写一点修正代码。如果需要,可以在ie.css里用CSS Hack对IE6/7进行差异处理。
<!--[if lt IE 8]><link rel="stylesheet" href="/ie.css" type="text/css" media="screen" /><![endif]-->
条件注释CSS文件的缺点是会增加至少1次http请求,影响渲染速度,而且维护时不够方便。
条件注释<html>
条件注释<html>跟上面的方法原理一样,只不过这里是给<html>注释不同的class。
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--><!--[if IE 7 ]> <html class="ie7"> <![endif]--><!--[if IE 8 ]> <html class="ie8"> <![endif]--><!--[if IE 9 ]> <html class="ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
这样在CSS中使用下面的代码即可区分版本
#content{background:red;}.ie9 #content{background:orange;}.ie8 #content{background:yellow;}.ie7 #content{background:green;}.ie6 #content{background:blue;}
你也可以增加诸如.ltie8这样的class来实现更方便的版本分组管理。这个方法不会增加http请求,而且不需要任何hack。
最佳方法
毫无疑问,最好的办法就是用条件注释<html>为CSS提供区分。所有CSS文件可以合并在一起,ie的fix代码与正常规则临近,便于维护,而且没有hack可以让代码符合标准(使用zoom、私有CSS3属性依旧无法通过验证T_T)。
标准浏览器[1]:本文指Chrome、Safari、Firefox及Opera等支持CSS标准属性的浏览器。
- 网页重构中区分IE6、IE7、IE8及标准浏览器的最佳方法
- 网页重构中区分IE6、IE7、IE8及标准浏览器的最佳方法
- 区分IE6、IE7、IE8及标准浏览器的最佳方法
- IETester中文免费版 - 最佳网页IE浏览器兼容性测试工具(IE6 IE7 IE8共存)
- 识别浏览器版本是IE6,IE7,IE8的方法
- CSS兼容IE6、IE7、IE8和Firefox浏览器的方法
- ie6,ie7,ie8 ,firefox 在css 中区别
- 让eWebEditor编辑器支持IE6.IE7.IE8傲游浏览器的方法
- 实现IE6、IE7、IE8多版本浏览器共存的五种方法
- IE6 IE7 IE8 FF浏览器的CSS兼容问题(转)
- [CSS Hack]解決IE6、IE7、IE8、Firefox的浏览器兼容问题
- IE6,IE7,IE8浏览器之间相互兼容的问题
- IE6 IE7 IE8 FF浏览器的CSS兼容问题探究
- 区别FF,IE7,IE8,IE6浏览器的CSS hack
- IE8 IE6 IE7 的 HACK
- ie6,ie7,ie8的兼容问题
- 浏览器兼容:IE6,IE7,IE8,FIREFOX,Chrome
- 浏览器兼容:IE6,IE7,IE8,FIREFOX,Chrome
- md5获取方法(c语言)
- 读书笔记_编译过程
- "手把手教你学linux驱动开发”OK6410系列之01---模块编程
- [PB编程]SystemError事件中的常用代码
- Oracle 11.2.0.1执行数据泵导入导出操作,导入日志报ORA-39083和ORA-14102错误
- 网页重构中区分IE6、IE7、IE8及标准浏览器的最佳方法
- 深入理解sizeof
- 溢短装
- lsb_release: command not found 解决
- 22个实用的HTML5 CSS3表单开发教程
- 常用字符串长度计算函数
- 开源电子商务OFBIZ:ofbiz工具类介绍
- 退出应用对话框
- [医疗开发]医疗相关名词解析