css 兼容性 ie11

CSS是网页开发中使用频率最高的样式表语言之一,但是由于不同浏览器对CSS的支持程度不同,可能会出现兼容性问题。而在IE11浏览器中,也存在着一些CSS兼容性问题,需要我们进行处理。

/* IE11兼容性处理代码 */
/* 1.不支持minmax()函数 */
.Box {
    width: -webkit-min-content; /* Safari/Chrome */
    width: -moz-min-content; /* Firefox */
    width: min-content; /* IE11及以上、Edge及以上、Chrome58+、Safari10.1+、Firefox50+ */
}

/* 2.flex布局兼容性 */
.container {
    display: -ms-flexBox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
}
.item {
    -ms-flex: 1; /* IE10 */
    flex: 1;
}

/* 3.transition兼容性 */
.btn {
    -webkit-transition: color 0.3s; /* Safari/Chrome */
    transition: color 0.3s; /* IE11及以上、Edge及以上、Chrome26+、Firefox16+、Safari6.1+ */
}

/* 4.opacity兼容性 */
.Box {
    filter: alpha(opacity=50); /* IE8及以下 */
    opacity: 0.5; /* IE9及以上、Firefox3.6+、Chrome4+、Safari3.1+ */
}

/* 5.border-radius兼容性 */
.Box {
    -webkit-border-radius: 10px; /* Safari/Chrome */
    -moz-border-radius: 10px; /* Firefox */
    border-radius: 10px; /* IE9及以上、Edge及以上、Chrome4+、Safari3.1+ */
}

css 兼容性 ie11

以上就是在开发过程中常用的IE11兼容性处理CSS代码,通过这些处理,可以让网页在IE11浏览器中正常展示,并提升用户体验。好的兼容性处理代码有利于网页运行的稳定和网站访问者体验的提升。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效