前端开发-浏览器兼容的坑

前端开发-浏览器兼容的坑

最近开始整理前端开发的浏览器兼容问题，初次发版内容少一点，后续会持续更新内容~

一、JS 篇

1.new Date() ---safari浏览器需要特殊照顾

// 对于一个代表时间的字符串
var  dateTimeStr  = "2019-10-10 10:10:10";
// 在谷歌浏览器上可以使用 new Date（）将其转换为时间戳,但是在safari上却会报错
new Date(dateTimeStr)
// chrome 正常 ； safari 会报 Invalid Date
// 处理方法：
// 将时间字符串中的'-'转换为'/'
dateTimeStr =  dateTimeStr.replace(/-/g, '/')
new Date(dateTimeStr) 
// 现在在谷歌浏览器还有safari就都正常了。

2.event 事件的兼容

关于event的兼容，在我写的这篇文章中有所提到，其中的方法可以直接使，JavaScript — event介绍以及兼容处理

3.获取光标位置--ie

// thisDom 为目标 dom 节点
// 非 ie 浏览器,如下获取光标位置
thisDom.selectionStart  
// ie 浏览器, 如下
let range = document.selection.createRange()
range.collapse(false)
range.setEndPoint('StartToStart', thisDom.createTextRange())
position = range.text.length

4.浏览器类型判断

// 浏览器类型判断
function browserType () {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
    var isIE = window.ActiveXObject || "ActiveXObject" in window
    var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
    var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
    var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
    var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1 && !isEdge; //判断Chrome浏览器
    if (isIE) {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        if (userAgent.indexOf('MSIE 6.0') != -1) {
            return "IE6";
        } else if (fIEVersion == 7) {
            return "IE7";
        }
        else if (fIEVersion == 8) {
            return "IE8";
        }
        else if (fIEVersion == 9) {
            return "IE9";
        }
        else if (fIEVersion == 10) {
            return "IE10";
        }
        else if (userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)) {
            return "IE11";
        }
        else {
            return "0"
        }//IE版本过低
    }
    if (isFF) {
        return "FF";
    }
    if (isOpera) {
        return "Opera";
    }
    if (isSafari) {
        return "Safari";
    }
    if (isChrome) {
        return "Chrome";
    }
    if (isEdge) {
        return "Edge";
    }
}

二、HTML 篇

1.textarea的rows不能为0，或者空''，会报错；

三、CSS篇

0.整理好的css兼容文章

a、ie6的css兼容问题

1.textarea--ie的滚动条

textarea在ie上会有滚动条，可以尝试在外面包裹一层div，使textarea的宽度大于外层div，使外层div遮住滚动条。

2.滚动条---ie

ie上的垂直滚动条，不包含在width里面；在谷歌浏览器中，则会包含在width里；[设置padding的时候需要注意]

3.line-height---ie

ie上的line-height和谷歌里面的不太一样，主要是盒模型的问题。ie中的line-height需要减去上下padding之和。

4.flex---ie8

ie8不支持flex布局

5.unset---ie

ie不支持unset覆盖，比如在前面写了border:1px solid #000,后面如果写border-bottom:unset;的话，不会将bottom-bottom清空。不过设置为none则会有效。

6.input 在 ie11 上会自带叉号

// 清除input在ie11上的自带的叉号
input::-ms-clear{display:none;}
input::-ms-reveal{display:none;}

7.ie10+ 以及 ie6~ie10的hack写法

// 兼容ie10+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 .className{
     
 }
}
.className{
    //IE6/IE7/IE8/IE9/IE10都生效
    padding-right: 22px \9;
}