微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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浏览器中正常展示,并提升用户体验。好的兼容性处理代码有利于网页运行的稳定和网站访问者体验的提升。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。