网页重构中区分IE6、IE7、IE8及标准浏览器的最佳方法

由于万恶的IE6和IE7,我们在页面重构时不免要对其进行各种bug修复及差异化处理。在标准浏览器中可实现的效果在IE里却有各种离奇问题,例如IE6IE7不能良好应对的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)。

标准浏览器:本文指IE9、Chrome、Safari、Firefox及Opera等支持CSS标准属性的浏览器。

转载:http://www.iefans.net/wangye-ie6-ie7-ie8-biaozhun/

时间: 2024-08-13 03:22:15

网页重构中区分IE6、IE7、IE8及标准浏览器的最佳方法的相关文章

HTML5 Shiv--解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局.大多数浏览器基本兼容html5,但目前来说ie6/ie7/ie8还不兼容html5标签,所以需要javascript处理,让其进行兼容 方法一:javascript code <!--[if lt IE9]> <script> (function() { if (!/*@[email protected]*/0) return; var e = "abbr, article, aside, a

解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

文章转载自:爱思资源网http://www.aseoe.com/show-10-701-1.html 导语 HTML5新标签在IE6 IE7 IE8上并不能识别,需要进行JavaScript处理.以下就介绍几种方式.方式一:Coding JavaScript<!--[ifltIE9]><script>(function(){if(! *@[email protected]* 0)return;vare="abbr,article,aside,audi HTML5新标签在I

完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义补充或相关内容: 使用他们能让代码

HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义补充或相关内容: 使用他们能让代码

DIV+CSS 网页兼容性问题(IE6 IE7 IE8 IE9 火狐 chorm)

本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧,供大家参考. CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 http://www.php100.com 2. margin加倍的问题 设置为float的

如何在ie6/ie7/ie8中实现iframe背景透明

最近做了一个项目,涉及到ie8iframe背景透明的问题,做了老半天,才把它搞定的,现在把我的经历贴出来和大家分享: 众所周知的根据W3C CSS 2.1 规范规定,''''background-color'''' 特性的默认值为 ''''transparent'''',即透明:但是IE6/IE7/IE8中 BODY 元素的背景色不是 transparent,而是 #FFFFFF;也就是变成了白色的. 其实,有一点我们是要注意的,也是必须知道的,在iframe中这个背景是其本身,不是iframe

meta 标签代码解决IE兼容问题,IE6,IE7,IE8,IE9,IE10(包括360的兼容模式)

最近做了一个项目,客户反映,在360下布局错位,远程调试了一下,发现客户使用的是360的兼容模式,然而我在自己的电脑上测试的时候是正常的(兼容模式也正常):简单研究了一下360的兼容模式,在360的兼容模式下按F12得到下图的调试信息: 经过测试,发现是红框处的设置的ie版本太低导致的,主要是文档模式更改文档模式为相对较高的版本即可解决, 这里,我添加了如下代码 <meta http-equiv="X-UA-Compatible" content="IE=edge,ch

一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 http://www.jb51.net/css/383986.html

在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 复制代码 代码如下: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml>; <head> <meta http-equiv=Content-Type conten

一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html><html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml>;<head><meta http-equiv=Content-Type content=“text/html;c