Internet Explorer Compatibility
一、總括
這文章描述Internet Explorer（IE）處理自訂HTML 屬性、標籤的特性（可以理解為“特別糟糕的性質”）。如果我們打算讓應用相容IE8以及以下的版本，那麼可以繼續往下看。
二、Short Version（簡述）
為了讓我們的angular應用在IE上工作，請確保：
1. 按需引入JSON.stringify（IE7或以下的都需要這玩意）。我們可以使用JSON2（https://github.com/douglascrockford/JSON-js）或者JSON3（http://bestiejs.github.com/json3/）。
2. 不要使用自訂標籤，諸如<ng:view>（用屬性版代替，如<div ng-view>）。如果還是想使用，則請看第3點。
3. 如果你確實想使用自訂標籤，那麼你必須做以下步驟，讓老IE認識你的自訂標籤。
<html xmlns:ng="http://angularjs.org"><head><!--[if lte IE 8]><script> document.createElement('ng-include'); document.createElement('ng-pluralize'); document.createElement('ng-view'); // Optionally these for CSS document.createElement('ng:include'); document.createElement('ng:pluralize'); document.createElement('ng:view');</script><![endif]--></head><body> ...</body></html>
需要關注的是：
xmls:ng - 命名空間 - 對於每一個我們計劃使用的自訂標籤，都需要有一個命名空間。
document.createElement(“自訂標籤名稱”) - 自訂標籤名稱的建立 - 因為這是舊版IE一個問題，我們需要通過IE判斷注釋（<!--[if lte IE 8]>…<![endif]-->）來特殊處理。對於每一個沒有命名空間或者非HTML預設標籤，都需要進行這種預定義，以讓IE不會犯傻（例如沒樣式…）。
三、Long Version（詳情）
IE對於非標準HTML標籤的處理會有問題。這大致可以氛圍兩類（有、無命名空間），每一類都有他自己的一個解決方式。
如果標籤名稱以”my:”開頭的話，將被當作命名空間，必須要一個想對應的命名空間定義（<html xmlns:my=”ignored”>）。
如果標籤沒有命名空間（xx:開頭），但並非一個標準的HTML的話，需要通過document.createElement(“標籤名稱”)進行聲明。
如果我們打算對自訂標籤定義樣式的話，我們必須使用document.createElement(“標籤名稱”)來進行自訂，regardless of XML命名空間（實驗證明，regardless of XML namespace意思很有可能是：不用管有命名空間的自訂標籤）。
四、The Good News（好訊息）
好訊息是，這個限制僅僅是對於元素名稱的，對屬性名稱沒影響。所以不需要對自訂屬性（<div> my-tag your:tag></div>）做特殊處理。
五、What happens if I fail to do this？（沒做這些處理的話，會發生什麼事呢？！）
假設我們有一個非標準的HTML標籤（對於my:tag或者my-tag都有一樣的結果。但測試過後，發現命名空間方式不會有這種煩惱）。
<html> <body> <mytag>some text</mytag> </body></html>
一般來說，將會轉換為一下的DOM結構：
#document +- HTML +- BODY +- mytag +- #text: some text
我們期望的，是BODY元素有一個mytag子項目，mytag又有一個文本子項目”some text”。
但IE不是這麼乾的（如果做了矯正措施，則不包括在內）！
#document +- HTML +- BODY +- mytag +- #text: some text +- /mytag
在IE裡面，BODY將會有3個孩子項目：
1. 一個自閉合的” mytag”，與<br/>類似。末尾的“/”是可選的，但<br>標籤不允許有任何子項目，所以瀏覽器將其分為<br>、some text、</br>三個兄弟元素，而不是單獨的<br>元素中含有some text元素。
2. 一個文本節點“some text”。這本來應該是mytag元素的子節點，不是它的兄弟節點。
3. 一個錯誤的自閉合標籤” /mytag”，說它錯誤，是因為元素名稱不允許含有”/”字元（在最後應該是允許的<br/>）。此外，閉合元素不應該是DOM的一部分（不應該以元素形式出現），因為它只用作勾畫DOM結構的邊界。
六、CSS Styling of Custom Tag Names（對自訂標籤進行CSS樣式定義）
如果想讓CSS選取器對自訂元素有效，那麼自訂元素必須通過document.createElement(“元素名稱”)進行預定義，regardless of XML namespace（實驗證明，這裡是不用管有XML命名空間的？！）
這裡是自訂標籤樣式定義的例子：
<!DOCTYPE html><html xmlns:ng="needed for ng: namespace"><head> <title>IE Compatbility</title> <!--[if lte IE 8]> <script> // needed to make ng-include parse properly document.createElement('ng-include'); // needed to enable CSS reference document.createElement('ng:view');//注釋掉也可以？！ </script> <![endif]--> <style> ng\:view { display: block; border: 1px solid red; width:100px; height:100px; } ng-include { display: block; border: 1px solid blue; width:100px; height:100px; } </style></head><body> <ng:view></ng:view> <ng-include></ng-include></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
