微软提供了这样一个代码:

<meta http-equiv="x-ua-compatible" content="ie=7" />

把这段代码放到<head>里面,在ie8里面的页面解析起来就跟ie7一模一样的了,所以,基本上可以无视ie8,剩下的代码只需要这样写就可以了:

background:#ffc; /*  对firefox有效*/
*background:#ccc; /* 对ie7有效 */
_background:#000; /* 只对ie6有效 */
 
解释一下吧:

firefox能解析第一段,后面的两个因为前面加了特殊符号“*”和“_”,firefox认不了,所以只认background:#ffc,看到的是黄色;

ie7前两段都能认,以最后的为准,所以最后解析是*background:#ccc,看到的是灰色;

ie6前三段都能认,而且“_”这个只有ie6能认,所以最后解析是_background:#000,看到的是黑色

ps:如果这样写还是有问题的话,请查看一下你的html头,看看<head>之前的内容是不是这样的标准写法

<!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中 !important 这个属性的用法:在CSS的使用中,遇到最多的问题就是不同浏览器之间的兼容问题。 由于IE并不严格执行W3C标准, 而又几乎垄断了浏览器市场。 所以作为一名合格的网站制作人员, 必须要针对不同的浏览器进行微调。 实现不同浏览器之间兼容的方法有很多, 比如利用JS探测用户的浏览器类型,从而调用不同的样式表。 或者就是利用!important 属性来实现微调的效果。 下面是具体的例子。

下面是一段普通的 DIV 代码:

<div id="a"></div>

下面是有关层A在CSS样式表中的定义, 注意,这里使用了!important这个属性。

#a{margin-left:30px!important; margin-left:20px;}

在上面的例子中, 层a 在IE浏览器中, 左边距为20像素, 而在Firefox中, 左边距则变为30像素。 这是因为, !important在 CSS 中表示优先调用, 由于IE不能够识别这个属性, 所以在IE中, 只能够调用 “margin-left:20px;" 这个选项, 所以同样的一段代码, 在Firefox和IE中就会显示不同的样式。不过值得注意的是, 最新版的IE 7.0 已经可以识别 !important, 这个属性了, 但是IE 6.0仍然不能识别。 所以这个小技巧还是相当有用的.


.e {/*FF OP*/
background-color: #FF0000
}
html* .e{/*Sa IE7 OP*/
background-color:#FF00FF
}
*+html .e{
background-color:#000000;/*OP*/
*background-color:#0000FF;/*IE7*/
}
* html .e{/*IE6*/
background-color:#00FFFF
}

safari是可以解析 html* .e  这样的写法的,但是却不能解析* html .e 这种写法,所以。先写html* .e 定好了safari下面的样式,再写一段*html .e来定好ie下的样式就能达到兼容的效果了。

在CSS布局中,还常常用到IE Hack。if IE起着非常大的作用!

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

作为IE的IF条件注释使用备忘,大家可以参考,有经验欢迎与网友分享。

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

在css引入块中用if 判断浏览器加载不同的css:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7hack.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6hack.css" />
<![endif]-->

欢迎跟贴补充!

posted on 2009-08-07 10:01  superlee  阅读(236)  评论(0编辑  收藏  举报