特別聲明：此篇文章由David根據(jù)Charles Morris的英文文章原名《Adapting your WebKit-optimized site for Internet Explorer 10》進(jìn)行翻譯，整個(gè)譯文帶有我們自己的理解與思想，如果譯得不好或不對(duì)之處還請(qǐng)同行朋友指點(diǎn)。如需轉(zhuǎn)載此譯文，需注明英文出處：http://blogs.windows.com/windows_phone/b/wpdev/archive/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10.aspx以及作者相關(guān)信息

——作者：Charles Morris

——譯者：David

IE10對(duì)HTML5的廣泛支持確保了你的網(wǎng)站在Windows Phone 8中比以往任何時(shí)候都能運(yùn)行的好。之前，為了支持iOS或Android你可能會(huì)把Webkit作為專門優(yōu)化的目標(biāo)?，F(xiàn)在可以讓你為Webkit優(yōu)化的網(wǎng)站也能輕松適配IE10。這意味著你將維護(hù)更少的代碼，并且，可以給你的客戶一個(gè)更好的體驗(yàn)。更讓人欣喜的是，這些改變會(huì)讓你的站點(diǎn)更符合HTML5標(biāo)準(zhǔn)。

本指南通過一系列的技巧、最佳實(shí)踐和代碼示例來幫助你把專為Webkit優(yōu)化過的網(wǎng)站更加輕松地適配到IE10。在我們團(tuán)隊(duì)與一些頗受歡迎的網(wǎng)站一起合作來把他們?yōu)閣ebkit優(yōu)化的網(wǎng)站適配到IE10的過程中產(chǎn)生了本指南。

第一步：檢測(cè)Windows Phone 8上的IE10

無論你在客戶端還是服務(wù)端運(yùn)行了user-agent（譯注：以下統(tǒng)稱ua）檢測(cè)，首先要做的事情就是更新你的檢測(cè)代碼，把IE10和基于Webkit的瀏覽器同等對(duì)待。這是開始調(diào)整你的代碼來支持IE10的一個(gè)基本條件。我們已經(jīng)發(fā)布了一些關(guān)于如何使用ua檢測(cè)IE10的最佳實(shí)踐，然而下面才是我們希望得到的IE10的ua字符串：

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之間仍存在著差異并影響到你的網(wǎng)站，那么你可以嘗試采用特征檢測(cè)或者其他為跨瀏覽器而寫的最佳實(shí)踐，而不是用ua檢測(cè)。尤其重要的是，要在Windows Phone 8上的IE10中使用HTML5視頻而不是基于flash的視頻。

作為第一步工作的一部分，你也應(yīng)該更新所有的第三方庫，比如jQuery Mobile，或者其他第三方提供的服務(wù)，確保你能得到他們對(duì)瀏覽器的最新支持。比如，如果你使用了Typekit（譯注：一個(gè)提供線上字體庫的網(wǎng)站）你就要重新發(fā)布你的自定義字體套件，或者你給你的視頻使用了Ooyala（譯注：一個(gè)跨平臺(tái)的視頻播放器解決方案），那么你就需要更新到他們最新的播放器。

第二步：確保標(biāo)準(zhǔn)模式

接下來這步是要再次確定一下IE10會(huì)在最符合標(biāo)準(zhǔn)的模式下渲染你的網(wǎng)站。使用標(biāo)準(zhǔn)模式會(huì)對(duì)最新的標(biāo)準(zhǔn)提供最大的支持，比如HTML5，CSS3，SVG等等。相反一些老的模式，比如“怪異模式”（quirks mode），只支持向后兼容。對(duì)于大多數(shù)網(wǎng)站來說，它們不需要做任何事情，因?yàn)槟J(rèn)就是標(biāo)準(zhǔn)模式。最簡(jiǎn)單的方法就是在每個(gè)頁面的頂端包含HTML5 doctype:

<!DOCTYPE html>

只要HTML 4.0+和XHTML 1.0+的 doctype不指定“Transitional”，那么它們默認(rèn)來說也使用標(biāo)準(zhǔn)模式渲染。

如果你是在局域網(wǎng)（或localhost）測(cè)試你的網(wǎng)頁，你需要臨時(shí)強(qiáng)制使用標(biāo)準(zhǔn)模式，因?yàn)椋琁E在內(nèi)網(wǎng)（intranet）默認(rèn)使用向后兼容模式。你可以在頁面的<head>標(biāo)簽內(nèi)添加下面的<meta>標(biāo)簽來強(qiáng)制IE使用標(biāo)準(zhǔn)模式，或者添加等效的HTTP頭：

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

當(dāng)你完成開發(fā)并把網(wǎng)站部署到因特網(wǎng)上的時(shí)候你就可以刪除這個(gè)<meta>標(biāo)簽，因?yàn)楝F(xiàn)在已經(jīng)不再需要它了。

以下的一些場(chǎng)景你應(yīng)該盡量小心，因?yàn)樗麄儠?huì)讓你的網(wǎng)站失去標(biāo)準(zhǔn)模式：

第三步：CSS和DOM API的更新

現(xiàn)在要準(zhǔn)備更新你的代碼了。最簡(jiǎn)單的更新就是先在專為Webkit寫的CSS和JavaScript處添加上兼容標(biāo)準(zhǔn)的（無前綴的）或者是加了微軟前綴的（Microsoft-prefixed）版本的代碼?？赡苣阒熬椭獣砸恍┳罴褜?shí)踐的方法，已經(jīng)在你的代碼中包含了很多的前綴。但除此以外，你還有一些其他的CSS和JS需要重新調(diào)整一下。

無前綴屬性

我們首先要看的是一組無前綴屬性。這些CSS或DOM屬性最初是加了Webkit前綴（ “-webkit”）的，但在IE10和其他的一些瀏覽器中卻要用到無前綴的格式。修復(fù)這些屬性非常簡(jiǎn)單，你只需要復(fù)制一行再去掉“-webkit”前綴就好。增加這樣一行無前綴的屬性也可以支持那些不是Webkit內(nèi)核的瀏覽器。

注意，這些適用于CSS屬性和等效的JavaScript調(diào)用，比如：

讓那些為Webkit優(yōu)化的網(wǎng)站也能適配IE10

下面是一個(gè)常用的Webkit CSS屬性和對(duì)應(yīng)被IE10所支持的標(biāo)準(zhǔn)（無前綴）格式清單。每個(gè)屬性都有個(gè)能讓JavaScript訪問的等效樣式屬性。比如，CSS中的border-radius就可以通過JavaScript的object.style.borderRadius來訪問。

讓那些為Webkit優(yōu)化的網(wǎng)站也能適配IE10

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

有前綴屬性

下面這些使用Webkit前綴的屬性在IE10中也同樣支持，只不過要加微軟的前綴（“-ms”），因?yàn)閃3C的相應(yīng)標(biāo)準(zhǔn)還沒有發(fā)展到足以使用無前綴的地步。你可以移步這里了解微軟在此方面的更多進(jìn)展。注意，你在添加“-ms”前綴的時(shí)候，你也可以選擇順便添加無前綴的版本以便向前兼容。

讓那些為Webkit優(yōu)化的網(wǎng)站也能適配IE10

漸變

在CSS標(biāo)準(zhǔn)化的過程中漸變的語法已經(jīng)發(fā)生改變了。尤其是漸變類型（比如線性(linear)或徑向(radial)）已經(jīng)移到屬性名的位置，而對(duì)于你如何指定漸變的方向和顏色也存在著差異。想更全面地了解IE10對(duì)于漸變語法的支持情況，請(qǐng)看Gradients (Windows).aspx)。例如：

讓那些為Webkit優(yōu)化的網(wǎng)站也能適配IE10

彈性盒布局的方向

IE10中對(duì)于設(shè)置彈性盒布局的方向的語法已經(jīng)變了。欲了解IE10所支持的彈性盒布局語法，請(qǐng)看彈性盒（“Flexbox”）布局（Windows）.aspx)。例如：

讓那些為Webkit優(yōu)化的網(wǎng)站也能適配IE10

圖片超鏈接的邊框

如果一個(gè)圖片作為超鏈接來用，IE在默認(rèn)情況下會(huì)給這個(gè)圖片加上一個(gè)藍(lán)色的高亮邊框，目的是強(qiáng)調(diào)這是一個(gè)超鏈接；Webkit則不會(huì)這么做。有一個(gè)簡(jiǎn)單的辦法就是用下面的CSS指明作為超鏈接的圖片不加邊框：

a img { border: none; }

邊框圖片

IE10目前還不支持border-image。為了保持你的頁面布局，我們建議你指定boder-style為solid，這樣可以保持邊框的寬（width），內(nèi)邊距（padding）和外邊距（margin）不變。（如果IE找不到它支持的邊框類型，他就會(huì)忽略那些值。）例如：

讓那些為Webkit優(yōu)化的網(wǎng)站也能適配IE10

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

Webkit和IE10對(duì)觸摸事件的處理是不同的。Webkit支持的觸摸接口是從鼠標(biāo)處理分離出來的；而IE10將觸摸（touch），鼠標(biāo)（mouse），觸控筆（stylus）分別封裝成單獨(dú)的接口（指針(pointer)）。指針事件模型也已經(jīng)作為標(biāo)準(zhǔn)提交給W3C下屬的指針事件工作小組。盡管接口有所不同，但事件模型通常是相同的，所以添加對(duì)指針事件的支持只需要修改很少的代碼。

監(jiān)聽指針事件

指針API使用的是標(biāo)準(zhǔn)的“down，move，up”事件模型。因此，很容易讓現(xiàn)有的事件監(jiān)聽對(duì)指針事件也生效。

讓那些為Webkit優(yōu)化的網(wǎng)站也能適配IE10

處理指針事件

如果所有的事件由同一個(gè)監(jiān)聽來處理，比如像前面例子中提到的“eventHandlerName”，你需要根據(jù)事件類型把它們分離給單獨(dú)的處理程序。這很容易映射到現(xiàn)有的事件處理程序：

讓那些為Webkit優(yōu)化的網(wǎng)站也能適配IE10

檢測(cè)主觸點(diǎn)

如前面所說，指針事件模型為每個(gè)觸點(diǎn)觸發(fā)單獨(dú)的事件。因此，如果你只想處理主觸點(diǎn)（比如單指拖動(dòng)的情況），你就需要在“move”和“up”處理之前使用下面這條語句過濾掉非主觸點(diǎn)的觸摸點(diǎn)：

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

檢索坐標(biāo)

因?yàn)橹羔樖录Ｐ蜑槊總€(gè)觸點(diǎn)觸發(fā)單獨(dú)的事件，所以不需要從一系列的觸摸中檢索一個(gè)具體的索引?？梢允褂谩癳vent”對(duì)象中的pageX和pageY直接獲取到坐標(biāo)。并且很容易把它合并到現(xiàn)有的代碼中：

讓那些為Webkit優(yōu)化的網(wǎng)站也能適配IE10

處理鼠標(biāo)輸入

IE10模型有一個(gè)優(yōu)勢(shì)即鼠標(biāo)輸入是作為相同的事件來處理的！因此，當(dāng)鼠標(biāo)劃過某個(gè)區(qū)域，IE10會(huì)觸發(fā)“move”事件。在單指拖拽這種情況下，你只想處理鼠標(biāo)按下并移動(dòng)的事件。你可以使用下面的http://msdn.microsoft.com/en-us/library/windows/apps/hh466130.aspxpointerType屬性在移動(dòng)（move）事件處理開始前檢測(cè)它：

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

關(guān)閉默認(rèn)觸摸行為

IE10的指針事件模型要求你明確地指出頁面上哪些區(qū)域是要用自定義手勢(shì)處理（使用你剛才添加的代碼），哪些是要用默認(rèn)的手勢(shì)處理（手指點(diǎn)到頁面）。你可以為元素添加-ms-touch-action屬性來為他們選擇默認(rèn)的手勢(shì)處理。例如：

讓那些為Webkit優(yōu)化的網(wǎng)站也能適配IE10

除了none這個(gè)屬性值外，Windows Phone 8上的IE10還支持pan-x和pan-y屬性值，它們可以指定瀏覽器默認(rèn)應(yīng)該處理橫向還是縱向的手勢(shì)，而JavaScript會(huì)處理其他的手勢(shì)。

第5步：處理非標(biāo)準(zhǔn)行為

最后一類更新在W3C中沒有相關(guān)的標(biāo)準(zhǔn)；因而Webkit和IE10處理也不同。但是，在所有這種情況下，Webkit和IE的解決方案可以無任何沖突地共存。

禁用鏈接高亮

包括iOS上的Safari和Windows Phone上的IE在內(nèi)的一些移動(dòng)端瀏覽器會(huì)在超鏈接元素被觸摸（tap）的時(shí)候顯示一個(gè)半透明的高亮背景，來給用戶一個(gè)附加的反饋。然而，很多網(wǎng)站想要禁用這種默認(rèn)的行為來更好地控制自己站點(diǎn)的外觀和體驗(yàn)。

讓那些為Webkit優(yōu)化的網(wǎng)站也能適配IE10

注意，msapplication-tap-highlight標(biāo)簽在頁面的

標(biāo)簽里只能出現(xiàn)一次，并且它會(huì)作用于整個(gè)頁面。這個(gè)標(biāo)簽只對(duì)移動(dòng)版（Windows Phone）的IE10起作用，而對(duì)桌面版（Windows）的IE10沒有任何效果（譯注：經(jīng)本人測(cè)試，在微軟的Surface RT中添加這條禁用高亮的標(biāo)簽也不起作用，并不會(huì)禁用超鏈接點(diǎn)擊時(shí)的半透明背景）。

禁用下拉列表的本地樣式

Webkit的專有CSS屬性“-webkit-appearance”可以改變控件的外觀讓它們看起來更像是本地控件。很多情況下，IE10默認(rèn)就是這么處理的，因此它不需要專門指定樣式。

然而，一個(gè)特定的、常用的場(chǎng)景是用“-web-appearance”來禁用出現(xiàn)在<select>元素中的下拉箭頭，然后讓它顯示一個(gè)自定義的外觀，比如一個(gè)背景圖片。當(dāng)下拉箭頭被移除之后通常會(huì)設(shè)置一個(gè)text-indent的值，目的是不讓下拉列表項(xiàng)中的文字在頁面上露出來。（但是，它卻會(huì)在我們點(diǎn)擊屏幕的時(shí)候顯示一個(gè)彈出的控件）。下面所示是在IE10中如何達(dá)到相同的效果：

讓那些為Webkit優(yōu)化的網(wǎng)站也能適配IE10

總結(jié)

本指南涵蓋了你為Webkit優(yōu)化的網(wǎng)站在IE10和其他兼容標(biāo)準(zhǔn)的瀏覽器上也能運(yùn)行得很好的最常用的適配方案。如果你有其他技巧是本文沒有涵蓋的，請(qǐng)你分享在下面的評(píng)論欄里。

在許多情況下，你網(wǎng)站中實(shí)際代碼的修改量是很小的，這主要取決于網(wǎng)站中使用到的特性和你已經(jīng)在你的代碼中應(yīng)用的最佳實(shí)踐。那么，開始吧，讓W(xué)indows Phone 8的用戶也能體驗(yàn)到最好的網(wǎng)站。

關(guān)于David

2009年開始接觸前端開發(fā)，2011年組建創(chuàng)業(yè)團(tuán)隊(duì)——[五維互動(dòng)]，2012年團(tuán)隊(duì)被“收編”并更名[創(chuàng)影互動(dòng)]，遂只身來上海發(fā)展，現(xiàn)在就職于FlipScript。歡迎交流共勉：騰訊微博、個(gè)人博客。

如需轉(zhuǎn)載煩請(qǐng)注明出處：

英文原文：http://blogs.windows.com/windows_phone/b/wpdev/archive/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10.aspx

中文譯文：http://www.w3cplus.com/css3/adapting-your-webkit-optimized-site-for-internet-explorer-10.html

　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費(fèi)用，即可穩(wěn)步提升排名至首頁。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。