[Notes][Vue][IE]瀏覽器兼容及ES6問題處理

[Notes][Vue][IE]瀏覽器兼容及ES6問題處理


【PART I】X-UA-Compatible設置IE兼容模式

強制瀏覽器呈現為特定的版本的標準。它不支持IE7及以下:
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7"/>

如果用分號分開,它設置為不同版本的兼容級別,IE7、IE9。它允許不同層次的向後兼容性:
<meta http-equiv="X-UA-Compatible" content="IE=7; IE-9"/>

只選擇其中一個選項:
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="X-UA-Compatible" content="IE=5">

允許更容易的測試和維護。雖然通常比較有用的版本,這是使用模擬:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

什麼版本IE 就用什麼版本的標準模式:
<meta http-equiv="X-UA-Compatible" content="IE=edge">

使用以下代碼強制IE 使用Chrome Frame:
<meta http-equiv="X-UA-Compatible" content="chrome=1">

最佳的兼容模式方案,結合考慮以上兩種:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

指定文件兼容性模式,在網頁中使用meta元素放入X-UA-Compatible http-equiv 標頭。以下是指定為Emulate IE7 mode兼容性之範例:

    <html>
    	<head>
    		<!-- Mimic Internet Explorer 7 -->
    		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    		<title> My Web Page </title>
    	</head>
    	<body>
    	</body>
    </html>
設定網站服務器以指定預設兼容性模式:

    <?xml version="1.0" encoding="utf-8"?>
    	<configuration>
    		<system.webServer>
    		<httpProtocol>
   		 <customHeaders>
    			<clear />
  			<add name="X-UA-Compatible" value="IE=EmulateIE7" />
			</customHeaders>
    	</httpProtocol>
    	</system.webServer>
    </configuration>

【PART II】不支援ES6的語法

一、先在Vue.js引入前 引入下面兩支JS
  <script src="js/polyfill.min.js" type="text/javascript"></script>
  <script src="js/babel.min.js" type="text/javascript"></script>

二、將自己寫的JS,加入type=”text/babel”

Reference

[學習筆記] Vue 專案在ie下卻跑不動了 白屏!!!

[JavaScript][HTML][CSS][PHP][JSP] 判斷使用者瀏覽器版本之方法

【HTML教學】X-UA-Compatible設置IE兼容模式

What does <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> do?

#Vue.js、Vuetify、 IE11執行的方法

babel-polyfill

babel-standalone