前端开发浏览器兼容的坑

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

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

一、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;
}