浅谈网站兼容性

上次已经分享过网站兼容性需要注意的一些问题并如何解决，这次就继续这个话题分享下。

1、当在网页上插入一张图片，会经常遇到在其他浏览器中显示正常，唯独在ie6中图片下方会多出一点空隙。

解决方法：设置img的显示方式为  display：block

2、表单输入框中，鼠标点击后，光标上下移动，或 出现半截情况。

解决方法：.input{line-height:16px;padding:2px 3px;height:16px;}

3、ie6.0下面经常会出现border边框断断续续的问题，在浏览器下一刷新边框是全的，再一刷新边框就会有断开。原因就是你的外层有边框，边框层里面嵌套的层里面有浮动，由于这个原因会引起ie6下面边框断裂

解决方法：在外层加zoom：1；或者height：100%；

4、在ie6.0下浮动双倍显示的问题，比如你设置了左边距5px，但实际上左边距10px

解决方法：在样式里面加入display：inline就可以解决

5、float的div闭合，清除浮动，自适应高度

举个例子：<div id="float1"></div>  <div id="float2"></div>  <div id="not"></div>

这里的not并不希望继续平移，而是希望往下排。（其中float1、float2已经设置为float:left），这段代码在ie里是没有问题的，但是FF就有问题了。

原因是not并非float标签，必须将flost标签闭合，在<div id="float2"></div>  <div id="not"></div>之间加上 <div id="clear"></div>（clear样式为#clear｛clear:both;｝）

这个div一定要主要位置，而且要于2个float:left标签同级，之间不能存在嵌套关系。

6、高度不适应

高度不适应是当内层对象的高度发送变化时外层的高度不能自适应，特别是当内层对象使用padding或margin时

例子：<div><p style="margin-top:20px;margin-bottom:20px;text-align:center;">内容</p></div>

解决方法：在p标签的上下各加2个空的div对象（.a{height:0px;overflow:hidden;}），或者为div加上border属性。

7、在ie6.0下怎么定义1px左右高度的容器

解决方法：这个问题是ie6.0下默认行高造成的，下面有3个解决方法，overflow:hidden | zoom:0.08 | line-height：1px；

好了，今天就先分享到这吧