网站Div+Css结构重构(兼容性问题)

1、IE与Fire Fox识别CSS属性区别标签 !important

#page_body{
width: 890px !important;/*指明应用于FireFox*/
height:25px !important;/*指明应用于FireFox*/

width: 900px ;/*IE则按重复定义的最后一个执行*/
height:30px ;/*IE则按重复定义的最后一个执行*/
}

以上样式
在IE6/7中只执行width: 900px与height:30px
FireFox中则优先执行带有!important标签的CSS行width: 890px与height:25px

记住，以上代码的顺序不能颠倒。

2、div居中区别

Fire FOX:margin:0 auto 0 auto !important;
IE:margin:0 auto;

FF: div 设置 margin-left, margin-right 为 auto 时已经居中



3、文本内容居中

Fire FOX:margin:0 auto 0 auto !important;text-align:center
IE:text-align:center

FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

4、width与margin,padding之间的宽度计算问题区别

一个600px宽的div，margin,padding的值计算区别

ie{width: 600px;margin:10px;padding10px;}

在Fire Fox中应修改为
FF{width: 560px;margin:10px;padding10px;}

也就是说在FF中，margin,padding的左右值也要算在width中，600-10x2-10X2=560px



在进行Div+Css重构中，IE与FF的排版结构中，最关键是第二和第四点，如果不处理好以上几个问题，那么你的你的网站在IE中浏览是那么定位精确，排版完美，一到Fire Fox中就是乱七八糟，横七树八的。