网站兼容性
网站兼容性一直是前段开发的头号大敌,有很多做网站的对网站的兼容性做的很不好。或者说根本就不知道怎么去解决网站的兼容性问题,在这里我整理一下影响兼容性的问
一.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样式影响的兼容性,当然还有别的样式这里就不一一举例了。除了样式外,影响兼容性的问题还有别的一些因素,就留着下次在分享了。
分享按钮
一.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样式影响的兼容性,当然还有别的样式这里就不一一举例了。除了样式外,影响兼容性的问题还有别的一些因素,就留着下次在分享了。