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

  在传统标准浏览器下,由于不同样式的设置,各浏览器呈现的页面基本不会出现大的差异,但是在比较低版本的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包不住子级的相对定位,当子级元素高度或宽度超出来后,还是会超出父级, 可行方案:给父级元素也加上相对定位,因为相对定位不会影响元素,不会脱离文档流。

posted on 2017-02-22 23:49  愚小子  阅读(110)  评论(0编辑  收藏  举报

导航