浏览器兼容问题记录

最新推荐文章于 2021-11-16 09:48:00 发布

haliofwu

最新推荐文章于 2021-11-16 09:48:00 发布

阅读量994

点赞数 1

分类专栏： web 前段杂文章标签：浏览器兼容 IE10 ie11

本文链接：https://blog.csdn.net/xixi880928/article/details/82986336

版权

本文记录了在处理浏览器兼容性问题时遇到的挑战，特别是针对IE10及更高版本。在IE11中，表格可能会被内容撑开，而`@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)`用于识别IE10+。IE11对flex和grid的支持有限，需要额外的兼容性处理。360浏览器有两种模式，其中Trident模式对一些特性支持不足，如linear-gradient和animation。对于React应用，需要注意它本身不支持IE8。" 115893490,10000276,Unity3D角色控制：旋转与移动实现,"['Unity3D', '游戏开发', 'C#编程', '3D模型控制', '游戏引擎']

摘要由CSDN通过智能技术生成

chrome,firefox,IE,360,等

1.@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {}
以此来识别IE10+以上的浏览器.但是注意,在该属性内的class,只会对没在该属性内的class的属性进行替代.如果比如:

.oper-wrap {
    position: absolute;
    width: 100%;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 33% 33% 33%;
    background-color: #1890ff;

    bottom: 0;
    opacity: 0;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

    .oper-wrap {
        position: absolute;
        width: 100%;
        background-color: #1890ff;
        bottom: 0;
        opacity: 0;
        display: block;   //  假设没有写该属性,则会默认是display:-ms-grid;ie 11能认识该属性,但却不能正确表现,so ...悲剧
    }
    
}

ant.design支持ie9(需要polyfills)以上.所以可以放心在9以上版本使用.在某些不兼容的地方自行修补;
1). table 在ie11中的表现会被内容撑开,使得长度超出屏幕;
<table style="table-layout:fixed"></table>
flex与grid