网站兼容性

网站兼容性一直是前段开发的头号大敌，有很多做网站的对网站的兼容性做的很不好。或者说根本就不知道怎么去解决网站的兼容性问题，在这里我整理一下影响兼容性的问

一.DOCTYPE影响CSS处理

1.FF:div设置margin-left,margin-right为auto时已经居中,IE不行

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

3.FF:设置padding后,div会增加height和width,但IE不会,故需要用!important多设一个height和width

4.FF:支持!important,IE则忽略,可用!important为FF特别设置样式，值得注意的是，一定要将xxxx!important这句放置在另一句之上

5.div的垂直居中问题:vertical-align:middle;将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行

6.在firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}

7.IE5和IE6的BOX解释不一致

IE5下div{width:300px;margin:0 10px 0 10px;}

div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width/**/:340px;margin:0 10px 0 10px}

8.margin加倍的问题

设置为float的div在IE下设置的margin会加倍。这是一个IE6都存在的bug。解决方案是在这个div里面加上display:inline;

例如：相应的css为

#IamFloat{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/}

这些就是一些CSS样式影响的兼容性，当然还有别的样式这里就不一一举例了。除了样式外，影响兼容性的问题还有别的一些因素，就留着下次在分享了。