首页 > 网站制作 > 最新CSS兼容方案

最新CSS兼容方案

2009年6月13日 发表评论 阅读评论

HACK1：

  1. #example {
  2. margin:5px!important; /* for Firefox */
  3. margin:10px; /* for IE6 */
  4. margin /**/:11px; /* for IE5 */
  5. }
  6. *+html #example{margin:15px!important; }/* for IE7 */


说明：!important声明可以提升指定样式规则的应用优先权。上面“for Firefox” 有“!important”，“for IE7” 也要加“!important”，否则实际出来后IE7依然使用第一个maring值5px。
HACK2：

  1. #example {margin:5px; }/* for Firefox */
  2. * html #example {margin:10px;} /* for IE6 */
  3. *+html #abc{margin:15px!important;} /* for IE7 */

说明：“for IE7”要加“!important”，“+html”能被ie7与ie5.01所识别，但ie5.01不识别important，所以*+html 再加!important 才只能被ie7识别。
HACK3：

  1. #example {
  2. margin:5px; /* For Firefox */
  3. *margin:10px; /* For IE7 & IE6*/
  4. _margin:15px; /* For IE6*/
  5. }

说明：这样写CSS文件无法通过验证，但是代码可以写的比较少。
HACK4：使用IE专用的条件注释

  1. <link rel="stylesheet" type="text/css" href="css.css" />
  2. <!--[if IE 7]>
  3. <!-- 适合于IE7 -->
  4. <link rel="stylesheet" type="text/css" href="ie7.css" />
  5. <![endif]-->
  6. <!--[if lte IE 6]>
  7. <!-- 适合于IE6及以下 -->
  8. <link rel="stylesheet" type="text/css" href="ie.css" />
  9. <![endif]-->

说明：条件注释的语法：

  1. [*]gt /Greater than/大于/<!--[if gt IE 5.5]>
  2. [*]gte /Greater than or equal to/大于等于/<!--[if gte IE 5.5]>
  3. [*]lt /Less than/小于/<!--[if lt IE 5.5]>
  4. [*]lte /Less than or equal to/小于等于/<!--[if lte IE 5.5]>
  5. [*]! /Note/不等于/<!--[if !IE 5.5]>

HACK5：

  1. example{
  2. margin: 5px;/*FF*/
  3. >margin: 10px;/*IE5*/
  4. }
  5. example/*IE5.5 */{
  6. >/*IE only*/margin: 15px;/*IE6*/
  7. >/*IE only*/margin /*IE5.5*/: 20px;
  8. }

说明：“margin”定义的顺利不能改变，即FF-IE5-IE6-IE5.5。对于IE的定义在属性前要加“>”，因为“example/**/{}”这个HACK在FF中可以识别。

分类: 网站制作 标签: , ,

  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.