首页 >> 编程资讯

如何处理IE不同版本的CSS效果

2012-01-03 23:38:56

 作为一个IT人员来说,我们不愿意去处理IE浏览器所呈现的不给力的效果。但是,你不得不承认你的老板或者客户依然在用着这一产品。让人头疼的是,由于不同的渲染器,不同的版本IE浏览器呈现的效果也是五花八门。所以,我们通常使用IE conditional comments ,来修复这一问题。下面向你呈现IE conditional comments ,以及另外两种更好的方法。

VIEW DEMO 

1 IE Conditional Comments

IE conditional comment 可能是最常见的修复特定IE版本的方法(IE6,IE7,IE8)。下面就是关于这个方法的小例子。

· <!–[if IE 8]> = IE8

· <!–[if lt IE 8]> = IE7 或者更低版本

· <!–[if gte IE 8]> = IE8及其更高版本

<!--[if IE 8]>
<mce:style type="text/css">
<! /* css for IE 8 */-->
<!--[if lt IE 8]>
<link href="ie7.css" _mce_href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

2 CSS对IE 的特殊规则


以下声明CSS规则的方法只能用于IE浏览器中。 举个例子, 在CSS属性前加一个星号(*)针对IE7,在CSS属性前加下划线针对IE6。 不过,这个方法也不太可取,因为毕竟这些不是CSS的真正语法。

· IE8 或者以下版本:CSS属性之后加反斜杠和9表示IE8(\\9)。

· IE7 or below:CSS属性前加星号(*)。

· IE6:CSS属性前加下划线(_)。

.box {

	background: gray; /* standard */

	background: pink\\9; /* IE 8 and below */

	*background: green; /* IE 7 and below */

	_background: blue; /* IE 6 */

}

3 HTML Class的条件句


第三种方法,是在HTML中加一个CSS class,最早是Paul Irish 创立的。它会先判断你的浏览器是不是IE,然后再对HTML标签加上CSS 的class。 它面向不同的IE版本,简单的把IEclass作为父类选择器(eg. .ie6 .box)。此方法绝对给力而且它不会导致任何验证错误。

<!--[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> <!--<![endif]-->