浏览器兼容问题记录

末蓝、 2022-05-08 06:24 314阅读 0赞

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 ...悲剧
        }
        
    }

1.  ant.design支持ie9(需要polyfills)以上.所以可以放心在9以上版本使用.在某些不兼容的地方自行修补;  
    1). table 在ie11中的表现会被内容撑开,使得长度超出屏幕;  
    `<table style="table-layout:fixed"></table>`
2.  flex与grid  
    ![ie11][]  
    IE11部分支持(能识别 -ms-grid,但无法正常表现);在ie中基本放弃使用这个了.  
    [https://juejin.im/post/5a3f494d6fb9a0450a678f8d][https_juejin.im_post_5a3f494d6fb9a0450a678f8d] \--光是一个grid的兼容,就在这里介绍了很多;  
    flex的兼容性:  
    ![在这里插入图片描述][70]

/* 父元素-flex容器 */
    .flex {
        display: box;              /* OLD - Android 4.4- */
    
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

[http://www.ayqy.net/blog/flexbox布局的兼容性/][http_www.ayqy.net_blog_flexbox] —flex的内容又是这么多内容;

1.  很大一部分中国网民使用的360浏览器;它有两种模式,一种是blink(webkit,也就是chrome)为内核的浏览模式.支持较好.一种是Trident(ie内核).可以用来模拟ie7,8,9,10,11各种浏览器.这种模式下, linear-gradient,animation等支持度不高,得自己想办法…
2.  **React doesn’t support IE8 anyway**

browsers: [
                            '>1%',
                            'last 4 versions',
                            'Firefox ESR',
                            'not ie < 9', /**/ React doesn't support IE8 anyway**
                          ],
                          flexbox: 'no-2009',

[ie11]: /images/20220508/edbaa0075bd7498e878ab76e8fe141c2.png
[https_juejin.im_post_5a3f494d6fb9a0450a678f8d]: https://juejin.im/post/5a3f494d6fb9a0450a678f8d
[70]: /images/20220508/00aee28e78f84be6a62f1cbe2a56224f.png
[http_www.ayqy.net_blog_flexbox]: http://www.ayqy.net/blog/flexbox%E5%B8%83%E5%B1%80%E7%9A%84%E5%85%BC%E5%AE%B9%E6%80%A7/