区分IE6、IE7、IE8及标准浏览器——条件注释<html>

flyxiang228

浏览: 60274 次
性别:
来自: 江西

最近访客更多访客>>

salansun

yu981260193

tuibo

phx_ptt

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

(x)Html/Css

浏览器 HTML IE CSS Chrome

IE6, IE7, Firefox, Opera , Safari 的 CSS Hacks

ie6将元素悬停

.ie6 {
top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') 
     ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight-20) 
     : document.body.scrollTop +(document.body.clientHeight-this.clientHeight-20)); /*底端*/
top: expression(eval(document.documentElement.scrollTop));/*顶端*/
}

ie6 png透明兼容

//除ie6
.face1Bg{background:url(images/1.png) no-repeat !important;}
//兼容ie6
.face1Bg{*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src="images/1.png") !important;*background:none !important;}

IE系列:

div { +property:value; } 在属性名前加上加号”+”,这个Hack只有IE系列可以识别.
div { *property:value; } 在属性名前加上星号”*”,这个Hack只有IE系列可以识别.
div { _property:value; } 在属性名前加上下划线”_”,这个Hack只有IE6 识别.
background-color:red\0; /* ie 8/9*/
background-color:blue\9\0; /* ie 9*/

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可识别

Firefox:

*:lang(lang) div { property:value !important; } 用伪类lang(语言)再加上!important进行定义的话,目前只有Firefox可以识别.
div, x:-moz-any-link { property:value; } 目前只有Firefox可以识别.

Safari:

div:empty { property:value !important; } 用伪类empty再加上!important进行定义的话,目前只有Safari可以识别.

Opera:

@media all and (min-width: 0px){ div { property:value; } } 利用特殊继承法进行定义的话,目前只有Opera可以识别.

由于万恶的IE（尤其指IE6和IE7），我们在页面重构时不免要对其进行各种bug修复及差异化处理。在标准浏览器[1]中可实现的效果在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时使用”：
   
由于IE8下CSS问题较少，一般只需要为IE6、7写一点修正代码。如果需要，可以在ie.css里用CSS Hack对IE6/7进行差异处理。

条件注释CSS文件的缺点是会增加至少1次http请求，影响渲染速度，而且维护时不够方便。
条件注释<html>
条件注释<html>跟上面的方法原理一样，只不过这里是给<html>注释不同的class。
     <html class=""> 
这样在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标准属性的浏览器。

http://lightcss.com/best-way-to-different-browser-for-css/区分IE6、IE7、IE8及标准浏览器——条件注释<html>

分享到：

css清除float方法 | 经验积累

2011-06-01 00:05
浏览 1777
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论