前端開發 - 瀏覽器兼容問題總結

HTML5 語義化標籤的兼容性

IE8 以下版本不支持html5語義化標籤
現象：

<!-- 現象: IE8 以下版本不支持 html5 語義化標籤 -->
<header>我是header標籤， 我應該獨佔一整行</header>

解決方案：

方案1： 在瀏覽器解析標籤之前, 動態創建一下 header 標籤, 瀏覽器就認識了

document.createElement("header");

方案2：默認行內, 需要轉成塊級

header {
  /* header 標籤應該獨佔一整行 */
  display: block;
}

但是 html5 新增了很多語義化標籤, 一個個創建太麻煩了, html5shiv 插件很好的解決這個問題：

方案3：html5shiv解決兼容性問題

在head中 引入 html5shiv 插件包即可解決 IE 8 不識別 html5 語義化標籤的問題

<script src="html5shiv.js"></script>

但是在支持html5語義化標籤的瀏覽器中, 這個js的執行就沒有必要, 消耗了性能

所以我們可以通過 CSS IE條件註釋 做兼容性處理

CSS條件註釋

CSS IE條件註釋 專門用於兼容IE 低版本

所以只有 IE9 及 IE9以下版本 才認識，其他版本的瀏覽器或者 IE10以上 的版本會當成註釋, 不會解析

它裏面有判斷IE版本的方式：

• lte：就是Less than or equal to的簡寫，也就是小於或等於的意思。
• lt ：就是Less than的簡寫，也就是小於的意思。
• gte：就是Greater than or equal to的簡寫，也就是大於或等於的意思。
• gt ：就是Greater than的簡寫，也就是大於的意思。

用法實例:

在小於等於 IE 8 的瀏覽器中才會執行, 在IE9 中, 就是普通的註釋, 不會解析執行：

<!--[if lte IE 8]>
    <script>
      alert("小於等於IE8都會執行");
    </script>
    <script src="html5shiv.js"></script>
<![endif]-->

大於 IE 8 的瀏覽器才執行, 只有 IE 9 認識, 其他瀏覽器, IE 10 及以上, 都將條件註釋當成註釋

<!--[if gt IE 8]>
   <script>
      alert("只有IE9才執行這句話");
   </script>
<![endif]-->

原生js的兼容性問題

getElementsByName()

在IE和Opera中， getElementsByName() 方法還會返回那些id爲指定值的元素。

document.getElementsByClassName(‘類名’)

ie9+支持

document.querySelector(‘選擇器’);

ie8+支持

innerText 和 innerHTML的兼容問題

• innerHTML是非標準屬性(非w3c標準),但是所有的瀏覽器都支持
• innerText屬性存在兼容性問題,早期的火狐瀏覽器不支持該屬性,使用textContent替代

獲取子節點

firstElementChild和lastElementChild 獲取子元素的第一個節點和最後一個節點。
IE9+支持
解決：
children(0) 返回第1個

addEventListener

IE9以上支持
IE9以下使用attchEvent()代替

事件對象 event

IE 6、7、8無法獲取事件對象的兼容性寫法

box.onclick = function (e) {
	// IE 6\7\8獲取事件對象使用window.event
	e = e || window.event;
}

阻止事件冒泡

e.stopPropagation()不支持IE 6\7\8
IE8以下使用e.cancelBubble = true;

兼容性寫法

if (e && e.stopPropagation) {
	e.stopPropagation
} else {
	window.event.cancelBubble = true;
}

頁面被捲曲頭部的兼容性方案

需要注意的是，頁面被捲去的頭部，有兼容性問題，因此被捲去的頭部通常有如下幾種寫法：

1. 聲明瞭 DTD，使用 document.documentElement.scrollTop
2. 未聲明 DTD，使用 document.body.scrollTop
3. 新方法 window.pageYOffset和 window.pageXOffset，IE9 開始支持

function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
 } 
使用的時候  getScroll().left