讓那些爲Webkit優化的網站也能適配IE10（轉載）

時間 2020-07-08

原文原文鏈接

轉載地址：http://www.w3cplus.com/css3/adapting-your-webkit-optimized-site-for-internet-explorer-10.htmlcss

特別聲明：此篇文章由David根據Charles Morris的英文文章原名《Adapting your WebKit-optimized site for Internet Explorer 10》進行翻譯，整個譯文帶有咱們本身的理解與思想，若是譯得很差或不對之處還請同行朋友指點。如需轉載此譯文，需註明英文出處：http://blogs.windows.com/windows_phone/b/wpdev/archive/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10.aspx以及做者相關信息html

——做者：Charles Morris前端

——譯者：Davidhtml5

IE10對HTML5的普遍支持確保了你的網站在Windows Phone 8中比以往任什麼時候候都能運行的好。以前，爲了支持iOS或Android你可能會把Webkit做爲專門優化的目標。如今可讓你爲Webkit優化的網站也能輕鬆適配IE10。這意味着你將維護更少的代碼，而且，能夠給你的客戶一個更好的體驗。更讓人欣喜的是，這些改變會讓你的站點更符合HTML5標準。css3

本指南經過一系列的技巧、最佳實踐和代碼示例來幫助你把專爲Webkit優化過的網站更加輕鬆地適配到IE10。在咱們團隊與一些頗受歡迎的網站一塊兒合做來把他們爲webkit優化的網站適配到IE10的過程當中產生了本指南。web

第一步：檢測Windows Phone 8上的IE10

不管你在客戶端仍是服務端運行了user-agent（譯註：如下統稱ua）檢測，首先要作的事情就是更新你的檢測代碼，把IE10和基於Webkit的瀏覽器同等對待。這是開始調整你的代碼來支持IE10的一個基本條件。咱們已經發布了一些關於如何使用ua檢測IE10的最佳實踐，然而下面纔是咱們但願獲得的IE10的ua字符串：windows

Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; ARM; Touch; IEMobile/10.0; <Manufacturer>; <Device> [;<Operator>])

處理完ua以後，若是Webkit和IE10之間仍存在着差別並影響到你的網站，那麼你能夠嘗試採用特徵檢測或者其餘爲跨瀏覽器而寫的最佳實踐，而不是用ua檢測。尤爲重要的是，要在Windows Phone 8上的IE10中使用HTML5視頻而不是基於flash的視頻。瀏覽器

做爲第一步工做的一部分，你也應該更新全部的第三方庫，好比jQuery Mobile，或者其餘第三方提供的服務，確保你能獲得他們對瀏覽器的最新支持。好比，若是你使用了Typekit（譯註：一個提供線上字體庫的網站）你就要從新發布你的自定義字體套件，或者你給你的視頻使用了Ooyala（譯註：一個跨平臺的視頻播放器解決方案），那麼你就須要更新到他們最新的播放器。app

第二步：確保標準模式

接下來這步是要再次肯定一下IE10會在最符合標準的模式下渲染你的網站。使用標準模式會對最新的標準提供最大的支持，好比HTML5，CSS3，SVG等等。相反一些老的模式，好比「怪異模式」（quirks mode），只支持向後兼容。對於大多數網站來講，它們不須要作任何事情，由於默認就是標準模式。最簡單的方法就是在每一個頁面的頂端包含HTML5 doctype:ide

<!DOCTYPE html>

只要HTML 4.0+和XHTML 1.0+的 doctype不指定「Transitional」，那麼它們默認來講也使用標準模式渲染。

若是你是在局域網（或localhost）測試你的網頁，你須要臨時強制使用標準模式，由於，IE在內網（intranet）默認使用向後兼容模式。你能夠在頁面的<head>標籤內添加下面的<meta>標籤來強制IE使用標準模式，或者添加等效的HTTP頭：

<meta http-equiv="x-ua-compatible" content="IE=edge" />

當你完成開發並把網站部署到因特網上的時候你就能夠刪除這個<meta>標籤，由於如今已經再也不須要它了。

如下的一些場景你應該儘可能當心，由於他們會讓你的網站失去標準模式：

不要包含doctype的聲明，而要使用上面提到的HTML5的doctype。
不要指定一個「tansitional」的doctype，刪除Trasitional這樣的字眼，或者乾脆採用HTML5的doctype。
不要用帶有IE=9（或者更早）的x-ua-compatible頭來強制使用具體的IE模式，而要指定IE=edge或者徹底移除x-ua-compatible頭，而且使用HTML5的doctype。

第三步：CSS和DOM API的更新

如今要準備更新你的代碼了。最簡單的更新就是先在專爲Webkit寫的CSS和JavaScript處添加上兼容標準的（無前綴的）或者是加了微軟前綴的（Microsoft-prefixed）版本的代碼。可能你以前就知曉一些最佳實踐的方法，已經在你的代碼中包含了不少的前綴。但除此之外，你還有一些其餘的CSS和JS須要從新調整一下。

無前綴屬性

咱們首先要看的是一組無前綴屬性。這些CSS或DOM屬性最初是加了Webkit前綴（「-webkit」）的，但在IE10和其餘的一些瀏覽器中卻要用到無前綴的格式。修復這些屬性很是簡單，你只須要複製一行再去掉「-webkit」前綴就好。增長這樣一行無前綴的屬性也能夠支持那些不是Webkit內核的瀏覽器。

注意，這些適用於CSS屬性和等效的JavaScript調用，好比：

下面是一個經常使用的Webkit CSS屬性和對應被IE10所支持的標準（無前綴）格式清單。每一個屬性都有個能讓JavaScript訪問的等效樣式屬性。好比，CSS中的border-radius就能夠經過JavaScript的object.style.borderRadius來訪問。

其餘一些不經常使用的屬性也支持無前綴格式，好比CSS多列布局。

有前綴屬性

下面這些使用Webkit前綴的屬性在IE10中也一樣支持，只不過要加微軟的前綴（「-ms」），由於W3C的相應標準尚未發展到足以使用無前綴的地步。你能夠移步這裏瞭解微軟在此方面的更多進展。注意，你在添加「-ms」前綴的時候，你也能夠選擇順便添加無前綴的版本以便向前兼容。

漸變

在CSS標準化的過程當中漸變的語法已經發生改變了。尤爲是漸變類型（好比線性(linear)或徑向(radial)）已經移到屬性名的位置，而對於你如何指定漸變的方向和顏色也存在着差別。想更全面地瞭解IE10對於漸變語法的支持狀況，請看Gradients (Windows).aspx)。例如：

彈性盒佈局的方向

IE10中對於設置彈性盒佈局的方向的語法已經變了。欲瞭解IE10所支持的彈性盒佈局語法，請看彈性盒（「Flexbox」）佈局（Windows）.aspx)。例如：

圖片超連接的邊框

若是一個圖片做爲超連接來用，IE在默認狀況下會給這個圖片加上一個藍色的高亮邊框，目的是強調這是一個超連接；Webkit則不會這麼作。有一個簡單的辦法就是用下面的CSS指明做爲超連接的圖片不加邊框：

a img { border: none; }

邊框圖片

IE10目前還不支持border-image。爲了保持你的頁面佈局，咱們建議你指定boder-style爲solid，這樣能夠保持邊框的寬（width），內邊距（padding）和外邊距（margin）不變。（若是IE找不到它支持的邊框類型，他就會忽略那些值。）例如：

第四步：更新觸摸（touch）和指針(pointer)事件

Webkit和IE10對觸摸事件的處理是不一樣的。Webkit支持的觸摸接口是從鼠標處理分離出來的；而IE10將觸摸（touch），鼠標（mouse），觸控筆（stylus）分別封裝成單獨的接口（指針(pointer)）。指針事件模型也已經做爲標準提交給W3C下屬的指針事件工做小組。儘管接口有所不一樣，但事件模型一般是相同的，因此添加對指針事件的支持只須要修改不多的代碼。

監聽指針事件

指針API使用的是標準的「down，move，up」事件模型。所以，很容易讓現有的事件監聽對指針事件也生效。

處理指針事件

若是全部的事件由同一個監聽來處理，好比像前面例子中提到的「eventHandlerName」，你須要根據事件類型把它們分離給單獨的處理程序。這很容易映射到現有的事件處理程序：

檢測主觸點

如前面所說，指針事件模型爲每一個觸點觸發單獨的事件。所以，若是你只想處理主觸點（好比單指拖動的狀況），你就須要在「move」和「up」處理以前使用下面這條語句過濾掉非主觸點的觸摸點：

if (window.navigator.msPointerEnabled && !event.isPrimary) return;

檢索座標

由於指針事件模型爲每一個觸點觸發單獨的事件，因此不須要從一系列的觸摸中檢索一個具體的索引。可使用「event」對象中的pageX和pageY直接獲取到座標。而且很容易把它合併到現有的代碼中：

處理鼠標輸入

IE10模型有一個優點即鼠標輸入是做爲相同的事件來處理的！所以，當鼠標劃過某個區域，IE10會觸發「move」事件。在單指拖拽這種狀況下，你只想處理鼠標按下並移動的事件。你可使用下面的http://msdn.microsoft.com/en-us/library/windows/apps/hh466130.aspx pointerType屬性在移動（move）事件處理開始前檢測它：

if (window.navigator.msPointerEnabled && ((event.pointerType == event.MSPOINTER_TYPE_TOUCH && event.buttons != 1) || !event.isPrimary)) return;

關閉默認觸摸行爲

IE10的指針事件模型要求你明確地指出頁面上哪些區域是要用自定義手勢處理（使用你剛纔添加的代碼），哪些是要用默認的手勢處理（手指點到頁面）。你能夠爲元素添加-ms-touch-action屬性來爲他們選擇默認的手勢處理。例如：

除了none這個屬性值外，Windows Phone 8上的IE10還支持pan-x和pan-y屬性值，它們能夠指定瀏覽器默認應該處理橫向仍是縱向的手勢，而JavaScript會處理其餘的手勢。

第5步：處理非標準行爲

最後一類更新在W3C中沒有相關的標準；於是Webkit和IE10處理也不一樣。可是，在全部這種狀況下，Webkit和IE的解決方案能夠無任何衝突地共存。

禁用連接高亮

包括iOS上的Safari和Windows Phone上的IE在內的一些移動端瀏覽器會在超連接元素被觸摸（tap）的時候顯示一個半透明的高亮背景，來給用戶一個附加的反饋。然而，不少網站想要禁用這種默認的行爲來更好地控制本身站點的外觀和體驗。

注意，msapplication-tap-highlight標籤在頁面的

標籤裏只能出現一次，而且它會做用於整個頁面。這個標籤只對移動版（Windows Phone）的IE10起做用，而對桌面版（Windows）的IE10沒有任何效果（譯註：經本人測試，在微軟的Surface RT中添加這條禁用高亮的標籤也不起做用，並不會禁用超連接點擊時的半透明背景）。

禁用下拉列表的本地樣式

Webkit的專有CSS屬性「-webkit-appearance」能夠改變控件的外觀讓它們看起來更像是本地控件。不少狀況下，IE10默認就是這麼處理的，所以它不須要專門指定樣式。

然而，一個特定的、經常使用的場景是用「-web-appearance」來禁用出如今<select>元素中的下拉箭頭，而後讓它顯示一個自定義的外觀，好比一個背景圖片。當下拉箭頭被移除以後一般會設置一個text-indent的值，目的是不讓下拉列表項中的文字在頁面上露出來。（可是，它卻會在咱們點擊屏幕的時候顯示一個彈出的控件）。下面所示是在IE10中如何達到相同的效果：