前端开发-浏览器兼容的坑
最近开始整理前端开发的浏览器兼容问题，初次发版内容少一点，后续会持续更新内容~
一、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兼容文章
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;
}
