区分ff/ie6/ie7/ie8,解决样式不兼容

下面的内容都来自网络摘抄,现拿出来分享
区分ff/ie6/ie7/ie8

注意下面介绍的这些hack写法仅适用于XHTML1.0。如果没有在HTML最前加上

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

那么效果将不一样!此外,这里所说的IE8,不是指IE8的兼容模式,因为IE8的兼容模式其实就是IE7。



selector{

property:value; // 所有浏览器

property:value\9; // 所有IE浏览器

+property:value; // IE7

_property:value; // IE6

}



区别IE6、7与FF/IE8:

background:blue;*background:orange;

引用

显示效果:

IE 6/7:orange

FF/IE8:blue

原理:FF/IE8不支持*开头,而IE6/7都支持。

      *是标准浏览器如FF不支持的,ie8也不支持,但是IE5/6/7能够识别



区别IE6与IE7/IE8/FF:

background:green;_background:blue;

引用

显示效果:

IE7/8/FF:green

IE6:blue

原理:IE6支持下划线"_",IE7、8和firefox均不支持下划线。

      版本小于IE6的IE浏览器能够识别_,但是其他的浏览器,IE7/IE8/FF都不识别_



区别FF/IE8和IE6/7:

background:orange;+background:green;-background:blue;

或者

background:orange;*background:green!important;*background:blue;

引用

显示效果:

IE6:blue

IE7:green

FF/IE8:orange

原理:IE6能识别-,IE7能识别+,IE8和FF都不能识别+和-

      IE8/FF都不识别*,IE7优先识别!important,IE6不能识别!important。



区别FF/IE8/7和IE6:

body>p{color:#f00};

引用

显示效果:

IE6:无色默认

IE7/8/FF:#f00

原理:body>p 支持IE7/8/FF,不支持IE6。



区别IE6和IE7/FF:

selector{color:red!important;color:green;}

显示效果:

IE6:green

IE7/8/FF:red

原理:IE6不识别!importent

      IE7识别!importent,并且!importent起到设置优先级的作用

      IE8识别!importent,并且!importent起到设置优先级的作用

      FF识别!importent,并且!importent起到设置优先级的作用



\9      p {color:#f00\9;}          支持 IE6/7/8         不支持FF

* html  p {color:#f00;}            支持 IE6             不支持FF IE7 IE8b

*+html  p {color:#f00;}            支持 IE7 IE8b        不支持FF IE6





IE都能识别*   标准浏览器(如FF)不能识别*

IE6能识别*    但不能识别 !important

IE7能识别*    也能识别!important

IE8不能识别*  但能识别!important

FF不能识别*   但能识别!important



关于IE8的hacks:

某外文网站上的解决方案,摘抄如下:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

大意是:在 <head>中, <title>和任何 <meta>之前插入这个 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> ,这一行信息就告诉IE8将该页面按照IE7的规则来处理!



.test{

    color:#00f\9; // IE8 only

    color:#00f\9; // 适用于所有IE版本

}



可同时区分IE8、IE7、IE6、Firefox的CSS hacks:

.test{

    color:#000; // Firefox

    color:#00f\9; // IE8

    *color:#f00; // IE7

    _color:#0f0; // IE6

}



书写顺序为FireFox在最前,其次是IE8、IE7,最后是IE6.

color:red;//所有浏览器

*color:blue\9;//所有IE

+color:orange;//IE7

_color:green;//IE6



若浏览器为FireFox,那么color:red;

若浏览器为IE8,根据CSS优先性原则,color:blue;

若为IE7,color:orange;

若为IE6,则color:green。



对于* - + \9四个标签来说

IE6识别 * 、_

IE7识别 * 、+

IE8识别 \9

FF什么都不识别 

你可能感兴趣的:(ie6)