Web标准-完美解决IE和Mozilla的布局差别(兼容IE6/IE7/FF)

在设计网页页面的时候，我通常会用DIV+CSS布局页面，但CSS就会存在一些与浏览器IE和其他(Mozilla、Opera等)浏览器里显示的兼容问题。看了一些文章后发现：

1、用!important能解决IE6和Mozilla的布局差别。

语法格式：{ sRule!important }

IE6不支持这个语法，而IE7，FF都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义。
如：
#item{
width:170px;
height:30px !important ;
height:150px;
border: 1px solid #000000;
}
可看到IE6是150高，IE7,FF是30的高。因此，利用!important，我们可以针对IE和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important。

注：
通常把有加!important的写在前面，因为CSS是靠近原则。FF看到加!important的就优先使用，而IE不认识!important，只有用到紧接其后的定义，所以上面#item{...}顺序调换时也将随之变化。

!important必定成为CSS布局的利器，请记住和掌握它吧:)。个人喜欢用这种写法。当然下面也是另一种写法。

２、另一种写法：IE6/IE7与FireFox：

*+html 与 *html 是IE特有的标签， firefox 暂不支持。而*+html 又为 IE7特有标签。

如：

#item { width: 80px;height:80px;border: 1px solid #FF0000;} /* FireFox */
*+html #item { width: 60px;height:200px;border: 1px solid #FF0000;} /* ie7 */
*html #item { width: 80px;height:500px;border: 1px solid #FF0000;} /* ie6 */
<div id="item">往尚空间</div>

可以看到高度不一样。

3、另一种写法：IE6/IE7与FireFox：

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

可以看到：IE都能识别*，标准浏览器(如FF)不能识别*。
另外：再补充一个，下划线“_”IE6支持下划线，IE7和firefox均不支持下划线。于是可以写如下：

#item {
width: 900px; /*for FF*/
*width: 600px;/*for ie7*/
_width: 300px;/*for ie6*/
height:200px;border: 1px solid #FF0000;}
我想理解了上面的知识相信你也该能运用自如。呵呵。。

注：书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。