首页 > 代码库 > 关于IE6,7下面的一些兼容性问题
关于IE6,7下面的一些兼容性问题
在传统标准浏览器下,由于不同样式的设置,各浏览器呈现的页面基本不会出现大的差异,但是在比较低版本的IE浏览器下,很容易就出现各种兼容性问题。这里只是列举几个比较简单的问题。
首先,在IE6下面,元素的边框高度最低为19个像素,当像素低于这个值时,就比较容易出现样式差异,浏览器一般会按照19来处理,解决方案:我们可以添加一条overflow:hidden;
当给元素加上浮动时,如果此时在给元素设置了margin值,那么在IE6下面,正常的margin值显示出来就会变为双倍,俗称的 “双边距bug”,解决办法:可以为元素的display设置为inline,在实际中可尽量避免两者同时出现,可以尽量设置padding值来代替margin。
IE6,7下面:如果想要元素都排成一行,最好给元素都加上浮动,这时可以给a标签和span都加上浮动
<li>
<a href="http://www.mamicode.com/#"></a>
<span></span>
</li>
在列表下面,IE6也存在一些小问题,当li本身没有浮动,但里面内容存在浮动时,li之间就会出现几个像素的间隙,可以为其加上设置 vertical-align:top;这个样式的设置,实现元素的对齐。
img默认也会距离底部几个像素,这事也可以设置图片block,如果不想改变图片的display属性,可以加上vertical-align:属性
IE6下父级元素的overflow包不住子级的相对定位,当子级元素高度或宽度超出来后,还是会超出父级, 可行方案:给父级元素也加上相对定位,因为相对定位不会影响元素,不会脱离文档流。
关于IE6,7下面的一些兼容性问题