浏览器兼容性问题备忘

    关于要不要兼容IE678,其实这就看业务需求了。比如有的企业,像电商类的,他们不想流失掉使用老版本IE的用户,因为流失用户就代表着流失金钱,所以他们必须要兼容IE678。我个人认为,从一个前端开发者的角度出发,掌握浏览器间的兼容性问题解决办法是生存所需,没啥可说的。    

    由于刚刚IETester崩溃(如果不想折腾IETester,可以使用VirtualBox装个虚拟机,在接近原生的环境下测试会更爽),而之前测试IE6下的兼容性问题又没有留下截图,所以本文只能以口述的形式记录一些常见的关于IE6解析css的兼容性问题及其解决方案。


    1.html5新增的标签兼容问题,这个可以使用插件解决:html5shiv.js,将其引入页面就好了。

    2.元素浮动之后,能设置宽度的话就给元素宽度。如果需要宽度是内容撑开,就给其里面的块元素设置浮动。因为在IE6下,块元素独占一行的特性和元素浮动后呈现内联元素的特性之间发生了冲突,如果想做到自适应的效果,就得给内部的块元素设置浮动属性。

    3.第一块元素浮动,第二块元素的margin等于第一块的宽度,在IE6下会有1px的间隙。解决办法:给第二块元素也加上float

    4.IE6下子元素超出父级宽高,会将父级撑开。所以我们尽量不要使子元素的宽高超出父元素的。

    5.p标签、h标签、td标签,不要在它们里面嵌套块元素标签。其实这个不算是IE6的兼容问题,在所有浏览器里都要注意。

    6.margin问题,关于margin其实存在两个小问题:

        ①margin-top传递问题,即子元素的margin-top会传递给父元素。要解决它,需要在主流浏览器中触发BFC(比如使用overflow:hidden),在IE6下触发haslayout(zoom:1)

        ②上下margin叠压问题(注意是“叠压”,不是“叠加”!),就是说同级的两个块元素,上面块的margin-bottom会和下面块的margin-top重叠。要避免这种情况,尽量去设置同向的margin吧。

    7.display:inline-block,这个属性在IE6下是不支持的。解决:*display:inline;  *zoom:1;

    8.IE6下最小高度问题解决:*overflow:hidden;

    9.IE6双边距问题,当元素浮动后再设置margin那么就会产生双倍边距。解决:*display:inline;

    10.li里的元素都浮动,在IE6下li之间会产生4px的间隙。解决:在li上设置 *vertical-align:top;

    11.IE6下父元素overflow:hidden 包不住有 position:relative 的子元素(子元素的宽高大于父元素)。解决:给父元素也加上 position:relative;

    12.IE6下绝对定位的父元素的宽高如果是奇数,那么绝对定位的子元素right和bottom会产生1px的定位偏差。解决:避免出现奇数

    13.IE6下绝对定位元素和浮动元素并列的话,绝对定位元素会消失。解决:避免二者处于同级。

暂时想到这么多,如果有新的发现,会持续更新。谢阅。





猜你喜欢

转载自blog.csdn.net/ghostlpx/article/details/52608738