关于IE6，7下面的一些兼容性问题

Posted 2020-09-01 愚小子

　　在传统标准浏览器下，由于不同样式的设置，各浏览器呈现的页面基本不会出现大的差异，但是在比较低版本的IE浏览器下，很容易就出现各种兼容性问题。这里只是列举几个比较简单的问题。

　　首先，在IE6下面，元素的边框高度最低为19个像素，当像素低于这个值时，就比较容易出现样式差异，浏览器一般会按照19来处理，解决方案：我们可以添加一条overflow:hidden;

　　当给元素加上浮动时，如果此时在给元素设置了margin值，那么在IE6下面，正常的margin值显示出来就会变为双倍，俗称的 “双边距bug”,解决办法：可以为元素的display设置为inline，在实际中可尽量避免两者同时出现，可以尽量设置padding值来代替margin。

　　IE6，7下面：如果想要元素都排成一行，最好给元素都加上浮动,这时可以给a标签和span都加上浮动

　　　　　　<li>

　　　　　　　　　<a href="#"></a>

　　　　　　　　　<span></span>

　　　　　　</li>

 

　　在列表下面，IE6也存在一些小问题，当li本身没有浮动，但里面内容存在浮动时，li之间就会出现几个像素的间隙，可以为其加上设置 vertical-align:top;这个样式的设置，实现元素的对齐。 

　　

　　img默认也会距离底部几个像素，这事也可以设置图片block，如果不想改变图片的display属性，可以加上vertical-align：属性

　　IE6下父级元素的overflow包不住子级的相对定位，当子级元素高度或宽度超出来后，还是会超出父级， 可行方案：给父级元素也加上相对定位，因为相对定位不会影响元素，不会脱离文档流。