css的兼容解决方法

2014-11-03 css 阅读量

推荐几种css兼容的方法，一般用在IE中。

第一种(不推荐)：

将当前页面使用IE7进行渲染

1
2
3

<meta http-equiv="x-ua-compatible" content="ie=7" />
<!-- 或者 -->
<meta http-equiv="X-UA-Compatible"content="IE=EmulateIE7" />

前提：页面头部加meta的时候请注意w3c的标准，如下为示范:

1 2	<!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">

第二种方法:

不添加头部代码，只通过修改css的样式解决兼容问题。
以下顺序不能颠倒！

margin-bottom: 40px;                    /* all属性 */
[color: #000000;color: #00FF00;          /* SF,CH支持 */
margin-bottom: 140px\9;                 /* IE6-10    11未测试 */
margin-bottom: 140px\0;                 /* IE8-10    11未测试 */
*margin-bottom: 450px;                  /* IE6/7的属性*/  
_margin-bottom: 450px;                  /* IE6的属性 */

PS：值和识别符(\0、\9等)之间不能有空格

/* All IE */
div { property:value\9; }    /*所有的IE都支持*/ 

/* IE9（含IE9）以上的浏览器支持 */
:root .a { background: #f00;}
:root .a { background: #f00\9;}
:root .a { background: #f00\0;}
:root .a { background: #f00\0\9;}
:root .a { background: #f00\9\0;}

/* IE8（含IE8）以上的浏览器支持*/
.test { property:value\0; }
.test { property:value\0\9; }
.test { property:value\9\0; }

/* 仅IE8 */
.test { property:value\0/; }

/* IE7（含IE7）以下的浏览器支持*/
.test { *property:value; } 
.test { +property:value; }

/* IE6 */
.test { _property:value; }
.test { -property:value; }

/* 非 IE */
.test { property//:value; }

IE9-CSSHACK另外写法：

#element { color:orange;}
#element { *color: white;}              /* IE6+7, doesn't work in IE8/9 as IE7 */
#element { _color: red; }               /* IE6 */
#element { color: green\0/;}            /* IE8 */
:root #element {  color:pink\0/;}       /* IE9 */

注释使用：

1
2
3

<!--[if IE 6]>
     .....
<![endif]-->

if IE起着非常大的作用！

if IE什么意思呢？下面就列举了一些在CSS常见的HACK控制语句。

作为IE的IF条件注释使用备忘，有些时候试用if IE而不是在css中使用hack，就能通过w3c验证。

一些常用注释：

<!--[if !IE]>除IE外都可识别<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
<!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
<!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

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

需要注意的是：IE7对样式的解释跟DTD是有关，在没有DTD的时候，IE7是能读取IE6的hack的。

注：

IE6能识别*，但不能识别!important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

	IE6	IE7	FF
*	√	√	×
!important	×	√	√
_	√	×	×

另外再补充一个，下划线”_”,IE6支持下划线，IE7和firefox均不支持下划线。(推荐) 于是大家还可以这样来区分IE6，IE7，firefox : background:orange; *background:green; _background:blue;