[兼容性]工作中常见的兼容性问题

1.IE8下,a标签下的Img元素会显示出蓝色边框，需给img添加{border-width:0px;border-style:none;}

2.IE6,7下color:inheritl;失效，直接写color:#XXX;即可

3.本地测试的时候引入了公共头部，里面有icon文件引入；后期在icon网站生成了新文件，又在本地css代码里引入；两个字体文件同font-family名称

在IE6、7中不显示icon，虽然公司icon的CDN已经做了处理；后来发现是低端浏览器不能识别引入或者说覆盖第一个字体文件

4.background:rgba()；兼容性只能到IE9；IE876只能通过filter或者添加兼容库CSSPIE来做；但是后两种方法性能影响比较大

LESS函数

.bgOpacity(@rgb:#000, @alpha:100%) {
    @color: fade(@rgb, @alpha);
    @argb: argb(@color);
    background-image: url(about:blank);
    background-color: @color; /* to make use of the defect of IE8-'s broswer that not recognizing `rgba` */
    filter: ~"@{IE_FILTER}.gradient(startcolorstr=@{argb},endcolorstr=@{argb})"; /* for IE6~9(startcolorstr=AARRGGBB) */
    *zoom: 1; /* trigger IE6/7 hasLayout */
    .ie9 &,
    .ks-ie9 & {
        /* avoid IE9's DXImageTransform and rgba accumulation */
        background-color: transparent;
    }
}
border-color也可以在通过rgba方式来做，但是兼容性上就出现了问题，目前低端浏览器上暂时无法实现border-color渐变或透明度改变。

filter滤镜通过配置渐变来实现背景色渐变，标准属性如下：

/* IE 6 y 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2F2727', endColorstr='#1a82f7', gradientType='0');
/* IE 8 y 9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2F2727', endColorstr='#1a82f7', gradientType='0')";

/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #1a82f7);

gradientType取值：0纵向渐变；1横向渐变。

5.IE6下父元素relative，子元素absolute时，通过left-right-bottom+height限制是无法把整个元素撑起来的

只能声明子元素的width

秒客网

[兼容性]工作中常见的兼容性问题

相关文章