CSS Hack和CSS Conditional Comments

如果你的web站点或应用程序是供给不同的浏览器用户使用的，那么你可能就需要使用到CSS Hack和CSS Conditional Comments，本质上CSS Conditional Comments是CSS Hack的一种。如果你的web站点CSS不是特别复杂，用CSS Hack就能够解决浏览器CSS兼容性问题，但是如果你的站点对用户体验要求比较高或者设计非常绚丽，用CSS Conditional Comments(CSS 条件注释)将是你更好的选择。简单的来说，CSS Hack是通过一些特殊的字符来区分IE6/7/8以及Firefox的，CSS Conditional Comments是给不同的浏览器加载不同的CSS文件（当然，这也可以用js来做）。

一、CSS Hack

CSS Hack是通过一些特殊的字符来区别IE 6, IE 7, IE 8和Firefox的，浏览器对于不能识别的字符，将会直接过滤掉，有很多字符能够用于CSS Hack，在这里有一个非常详细的列表，下面我只列出了一些比较常用的Hack字符。

	IE6	IE7	IE8	FireFox
_	√	×	×	×
*	√	√	×	×
*+ html	×	√	×	×
!important	×	√	√	√
\9	√	√	√	×
@import ‘style.css’ @import “style.css” @import url(style.css) @import url(‘style.css’) @import url(“style.css”)	√	√	√	√

1. _ * \9 !important

区别Firefox 和 IE 6

	/*区别Firefox和IE 6*/
	body{
		background-color: red;		/*	Firefox	*/
		*background-color: yellow;	/*	IE6/7	*/
	}

区别Firefox 和 IE 7

/*区别Firefox 和 IE 7*/
	body{
		background: orange;
		*background: green;
	}

区别IE 7 和 IE 6

        /*区别IE 7 和 IE 6*/
	/*ie7显示绿色，ie6显示蓝色*/
	body{
		background: green !important;
		*background: blue;
	}

区别IE和Firefox

/*区别IE和Firefox*/
	body{
		background-color: red;		/*	所有浏览器都支持	*/
		background-color: yellow\9;	/*	IE6/7/8			*/
	}

区别FF/IE8/IE7/IE6

	/*区别IE6/7/8和其他浏览器*/
	body{
		background-color: red;		/*	所有浏览器都支持	Firefox显示红色	*/
		background-color: green\9;	/*	IE6/7/8			IE8显示绿色		*/
		*background-color: yellow;	/*	IE6/7			IE7显示黄色		*/
		_background-color: blue;	/*	IE6				IE6显示蓝色		*/
	}

从上述代码中，可以看出，书写CSS Hack的顺序为Firefox<IE8<IE7<IE6，由高标准向低标准走。

2.关于!important和*+html

引用：http://www.neoease.com/css-browser-hack/

优先度: (*+html + !important) > !important > +html

#bgcolor {
	background:red !important; /* Firefox 等其他浏览器 */
	background:blue; /* IE6 */
}
*+html #bgcolor {
	background:green !important; /* IE7 */
}

二、CSS Conditional Comments

引用：http://lifesinger.org/blog/2009/06/goodbye-to-css-hack/

http://www.yaosansi.com/post/1000.html

条件注释包含一些判断，不过这些判断并不是在js中执行，而是在html中执行，使用的方法也非常简单。

1.基本使用方法

<!--[if XXX]>
这里是正常的html代码
<![endif]-->

2.判断IE浏览器的基本语法

<!--[if IE]> / 如果浏览器是IE /
<!--[if IE 6]> / 如果浏览器是IE 6 的版本 /
<!--[if IE 7]> / 如果浏览器是IE 7 的版本 /
<!--[if IE 8]> / 如果浏览器是IE 8 的版本 /

3.逻辑判断

逻辑判断并不是很常用，但是其中的”!”常常用于判断非IE浏览器

lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同

例句：

<!--[if gt IE 6]> / 如果IE版本大于6 /
<!--[if lte IE 7]> / 如果IE版本小于等于7 /
<!--[if !IE]> / 如果浏览器不是IE /

4.使用

<!-- 默认先调用css.css样式表 -->
<link rel="stylesheet" type="text/css" href="css.css" />

<!--[if !IE]>
<!-- 非IE下调用1.css样式表 -->
<link rel="stylesheet" type="text/css" href="1.css" />
<![endif]-->

<!--[if lt IE 6]>
<!-- 如果IE浏览器版本小于6,调用2.css样式表 -->
<link rel="stylesheet" type="text/css" href="2.css" />
<![endif]-->

<!--[if lt IE 7 ]><body class="ie6"><![endif]-->
<!--[if IE 7 ]><body class="ie7"><![endif]-->
<!--[if IE 8 ]><body class="ie8"><![endif]-->>
<!--[if !IE]>--><body><!--<![endif]-->

<style type="text/css">
    body.ie6 .test { background-color: blue }
    body.ie7 .test { background-color: red }
    body.ie8 .test { background-color: green }
</style>

posted @ 2010-03-30 16:28 Sunny Peng 阅读(1682) 评论(8) 收藏举报

刷新页面返回顶部