关于IE和非IE浏览器的一些差异笔记

区别浏览器

        // 浏览器判断(vue定义函数方法)
        JudgeBroswer: function () {
            var userAgent = navigator.userAgent.toLowerCase();
　　　　　　　// AddBy 2020-10-22
　　　　　　　// if(!!window.ActiveXObject||"ActiveXObject" in window){}  //判断是否为IE浏览器
　　　　　　　// EndBy 2020-10-22
            if (userAgent.indexOf("compatible") > -1 && (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("msie") > -1)) {
                return "IE";
            }
            else
            {
                return "others";
            }
        },

值得注意的是：navigator.userAgent.toLowerCase();能够获取各个浏览器的信息信息，但是信息里面包含了默认浏览器信息，例如："mozilla/5.0 (compatible; msie 10.0; windows nt 6.1; wow64; trident/6.0; slcc2; .net clr 2.0.50727; .net clr 3.5.30729; .net clr 3.0.30729; media center pc 6.0; .net4.0c; .net4.0e)"，“mozilla/5.0”表示的是默认浏览器的信息，里面的“msie 10.0”才是表示当前版本的IE浏览器信息。

 

各部分功能差异

 1.关于滚动条的差异：

　　以jq为基础

if ("IE" == _this.JudgeBroswer()) {
　　HValue = $("#CBRFTextID")[0].scrollHeight;  // IE中获取滚动条的高度使用的是scrollHeight
}
else{
　　HValue = $("#CBRFTextID")[0].scrollTopMax;  // 非IE下，可以使用ScrollTop()，但是ScrollTop()主要是用来设计滚动条的高度，并且获取滚动条能够滑动的高度，一般情况下，是滑动到底部能够获取滚动条的高度(滑动高度+页面本身高度)，所以没必要做滚动底部的操作，所以这里使用了scrollTopMax
}

2.关于css样式中textarea自动换行差异：(Addby 2020-09-13 已同步于css自适应 未知宽度div居中 溢出显示...等常用样式渲染 EndBy 2020-09-13)

word-break:break-all;  /* 非IE下textarea自动换成*/
word-wrap : break-word;  /* 非IE下textarea自动换成*/

AddBy 2021-01-22

3.关于ie浏览器下animation不能够调整图片大小问题

<div class="QSNotData" v-show="IsSAction">
                            <div class="ImageShow"><img src="Images/空数据占位.png" /></div>
                            <div class="NullFontCss">提示数据</div>
                        </div>

.QSNotData .ImageShow {
    width: 353px;
    height: 96px;
　　/*设置布局样式*/
    display:flex;
    display:-ms-flexbox;
    flex-direction: row;
    -ms-flex-direction:row;
    justify-content: center;
    -ms-flex-pack:center;
}
.ImageShow img{
    animation:QSNDImgFunc 0.5s forwards;
}
@keyframes QSNDImgFunc{
    0%{
        width: 0px;
        height: 0px;
    }
    100%{
        width: 353px;
        height: 96px;
    }
}

 

EndBy 2021-01-22

 AddBy 2021-06-17

3.关于只适应适配(即使用@media screen)的总结：

@media screen在一些浏览器中(目前发现IE11的edge)会出现多层嵌套无法使用的现象，即下面使用方式无法进行识别

@media screen and (resolution: 96dpi) {
    @media screen and (min-height:769px) {
    }
    @media screen and (max-height:768px) {
    }
}

只能修改为：

@media screen and (resolution: 96dpi) and (min-height:768px){}
@media screen and (resolution: 96dpi) and (max-height:768px){}

EndBy 2021-06-17

 

 

 

3.待续...

、、

css自适应 未知宽度div居中 溢出显示...等常用样式渲染