前端开发-浏览器兼容的坑
<h1 id="前端开发-浏览器兼容的坑">前端开发-浏览器兼容的坑</h1><p><code>最近开始整理前端开发的浏览器兼容问题，初次发版内容少一点，后续会持续更新内容~</code></p>
<h2 id="一js-篇">一、JS 篇</h2>
<h3 id="1new-date----safari浏览器需要特殊照顾">1.new Date() ---safari浏览器需要特殊照顾</h3>
<pre><code>// 对于一个代表时间的字符串
vardateTimeStr= "2019-10-10 10:10:10";
// 在谷歌浏览器上可以使用 new Date（）将其转换为时间戳,但是在safari上却会报错
new Date(dateTimeStr)
// chrome 正常 ； safari 会报 Invalid Date
// 处理方法：
// 将时间字符串中的'-'转换为'/'
dateTimeStr =dateTimeStr.replace(/-/g, '/')
new Date(dateTimeStr)
// 现在在谷歌浏览器还有safari就都正常了。
</code></pre>
<h3 id="2event-事件的兼容">2.event 事件的兼容</h3>
<p>关于event的兼容，在我写的这篇文章中有所提到，其中的方法可以直接使，JavaScript — event介绍以及兼容处理</p>
<h3 id="3获取光标位置--ie">3.获取光标位置--ie</h3>
<pre><code>// thisDom 为目标 dom 节点
// 非 ie 浏览器,如下获取光标位置
thisDom.selectionStart
// ie 浏览器, 如下
let range = document.selection.createRange()
range.collapse(false)
range.setEndPoint('StartToStart', thisDom.createTextRange())
position = range.text.length
</code></pre>
<h3 id="4浏览器类型判断">4.浏览器类型判断</h3>
<pre><code>// 浏览器类型判断
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";
}
}
</code></pre>
<h2 id="二html-篇">二、HTML 篇</h2>
<h3 id="1textarea的rows不能为0或者空会报错">1.textarea的rows不能为0，或者空''，会报错；</h3>
<h2 id="三css篇">三、CSS篇</h2>
<h2 id="0整理好的css兼容文章">0.整理好的css兼容文章</h2>
<p>a、ie6的css兼容问题</p>
<h3 id="1textarea--ie的滚动条">1.textarea--ie的滚动条</h3>
<p>textarea在ie上会有滚动条，可以尝试在外面包裹一层div，使textarea的宽度大于外层div，使外层div遮住滚动条。</p>
<h3 id="2滚动条---ie">2.滚动条---ie</h3>
<p>ie上的垂直滚动条，不包含在width里面；在谷歌浏览器中，则会包含在width里；[设置padding的时候需要注意]</p>
<h3 id="3line-height---ie">3.line-height---ie</h3>
<p>ie上的line-height和谷歌里面的不太一样，主要是盒模型的问题。ie中的line-height需要减去上下padding之和。</p>
<h3 id="4flex---ie8">4.flex---ie8</h3>
<p>ie8不支持flex布局</p>
<h3 id="5unset---ie">5.unset---ie</h3>
<p>ie不支持unset覆盖，比如在前面写了border:1px solid #000,后面如果写border-bottom:unset;的话，不会将bottom-bottom清空。不过设置为none则会有效。</p>
<h3 id="6input-在-ie11-上会自带叉号">6.input 在 ie11 上会自带叉号</h3>
<pre><code>// 清除input在ie11上的自带的叉号
input::-ms-clear{display:none;}
input::-ms-reveal{display:none;}
</code></pre>
<h3 id="7ie10-以及-ie6ie10的hack写法">7.ie10+ 以及 ie6~ie10的hack写法</h3>
<pre><code>// 兼容ie10+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.className{
}
}
.className{
//IE6/IE7/IE8/IE9/IE10都生效
padding-right: 22px \9;
}
</code></pre>
<p>最近在搞一个和前端程序员相关的公号，除了技术分享之外，也增加了对于职业发展、生活记录之类的文章，欢迎大家关注，一起聊天、吐槽，一起努力工作，认真生活！<br>
<img src="https://img2018.cnblogs.com/blog/1806307/201911/1806307-20191126212112375-1961956912.png"></p><br><br>
来源：https://www.cnblogs.com/JHCan333/p/11746830.html
頁:
[1]