让那些为Webkit优化的网站也能适配IE10（转载）
轉(zhuǎn)載地址：http://www.w3cplus.com/css3/adapting-your-webkit-optimized-site-for-internet-explorer-10.html
特別聲明：此篇文章由David根據(jù)Charles Morris的英文文章原名《Adapting your WebKit-optimized site for Internet Explorer 10》進(jìn)行翻譯，整個(gè)譯文帶有我們自己的理解與思想，如果譯得不好或不對之處還請同行朋友指點(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對HTML5的廣泛支持確保了你的網(wǎng)站在Windows Phone 8中比以往任何時(shí)候都能運(yùn)行的好。之前，為了支持iOS或Android你可能會把Webkit作為專門優(yōu)化的目標(biāo)。現(xiàn)在可以讓你為Webkit優(yōu)化的網(wǎng)站也能輕松適配IE10。這意味著你將維護(hù)更少的代碼，并且，可以給你的客戶一個(gè)更好的體驗(yàn)。更讓人欣喜的是，這些改變會讓你的站點(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)生了本指南。
第一步：檢測Windows Phone 8上的IE10
無論你在客戶端還是服務(wù)端運(yùn)行了user-agent（譯注：以下統(tǒng)稱ua）檢測，首先要做的事情就是更新你的檢測代碼，把IE10和基于Webkit的瀏覽器同等對待。這是開始調(diào)整你的代碼來支持IE10的一個(gè)基本條件。我們已經(jīng)發(fā)布了一些關(guān)于如何使用ua檢測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)站，那么你可以嘗試采用特征檢測或者其他為跨瀏覽器而寫的最佳實(shí)踐，而不是用ua檢測。尤其重要的是，要在Windows Phone 8上的IE10中使用HTML5視頻而不是基于flash的視頻。
作為第一步工作的一部分，你也應(yīng)該更新所有的第三方庫，比如jQuery Mobile，或者其他第三方提供的服務(wù)，確保你能得到他們對瀏覽器的最新支持。比如，如果你使用了Typekit（譯注：一個(gè)提供線上字體庫的網(wǎng)站）你就要重新發(fā)布你的自定義字體套件，或者你給你的視頻使用了Ooyala（譯注：一個(gè)跨平臺的視頻播放器解決方案），那么你就需要更新到他們最新的播放器。
第二步：確保標(biāo)準(zhǔn)模式
接下來這步是要再次確定一下IE10會在最符合標(biāo)準(zhǔn)的模式下渲染你的網(wǎng)站。使用標(biāo)準(zhǔn)模式會對最新的標(biāo)準(zhǔn)提供最大的支持，比如HTML5，CSS3，SVG等等。相反一些老的模式，比如“怪異模式”（quirks mode），只支持向后兼容。對于大多數(shù)網(wǎng)站來說，它們不需要做任何事情，因?yàn)槟J(rèn)就是標(biāo)準(zhǔn)模式。最簡單的方法就是在每個(gè)頁面的頂端包含HTML5 doctype:
<!DOCTYPE html>只要HTML 4.0+和XHTML 1.0+的 doctype不指定“Transitional”，那么它們默認(rèn)來說也使用標(biāo)準(zhǔn)模式渲染。
如果你是在局域網(wǎng)（或localhost）測試你的網(wǎng)頁，你需要臨時(shí)強(qiáng)制使用標(biāo)準(zhǔn)模式，因?yàn)?#xff0c;IE在內(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)不再需要它了。
以下的一些場景你應(yīng)該盡量小心，因?yàn)樗麄儠屇愕木W(wǎng)站失去標(biāo)準(zhǔn)模式：
- 不要包含doctype的聲明，而要使用上面提到的HTML5的doctype。
- 不要指定一個(gè)“tansitional”的doctype，刪除Trasitional這樣的字眼，或者干脆采用HTML5的doctype。
- 不要用帶有IE=9（或者更早）的x-ua-compatible頭來強(qiáng)制使用具體的IE模式，而要指定IE=edge或者完全移除x-ua-compatible頭，并且使用HTML5的doctype。
第三步：CSS和DOM API的更新
現(xiàn)在要準(zhǔn)備更新你的代碼了。最簡單的更新就是先在專為Webkit寫的CSS和JavaScript處添加上兼容標(biāo)準(zhǔn)的（無前綴的）或者是加了微軟前綴的（Microsoft-prefixed）版本的代碼。可能你之前就知曉一些最佳實(shí)踐的方法，已經(jīng)在你的代碼中包含了很多的前綴。但除此以外，你還有一些其他的CSS和JS需要重新調(diào)整一下。
無前綴屬性
我們首先要看的是一組無前綴屬性。這些CSS或DOM屬性最初是加了Webkit前綴（ “-webkit”）的，但在IE10和其他的一些瀏覽器中卻要用到無前綴的格式。修復(fù)這些屬性非常簡單，你只需要復(fù)制一行再去掉“-webkit”前綴就好。增加這樣一行無前綴的屬性也可以支持那些不是Webkit內(nèi)核的瀏覽器。
注意，這些適用于CSS屬性和等效的JavaScript調(diào)用，比如：
下面是一個(gè)常用的Webkit CSS屬性和對應(yīng)被IE10所支持的標(biāo)準(zhǔn)（無前綴）格式清單。每個(gè)屬性都有個(gè)能讓JavaScript訪問的等效樣式屬性。比如，CSS中的border-radius就可以通過JavaScript的object.style.borderRadius來訪問。
其他一些不常用的屬性也支持無前綴格式，比如CSS多列布局。
有前綴屬性
下面這些使用Webkit前綴的屬性在IE10中也同樣支持，只不過要加微軟的前綴（“-ms”），因?yàn)閃3C的相應(yīng)標(biāo)準(zhǔn)還沒有發(fā)展到足以使用無前綴的地步。你可以移步這里了解微軟在此方面的更多進(jìn)展。注意，你在添加“-ms”前綴的時(shí)候，你也可以選擇順便添加無前綴的版本以便向前兼容。
漸變
在CSS標(biāo)準(zhǔn)化的過程中漸變的語法已經(jīng)發(fā)生改變了。尤其是漸變類型（比如線性(linear)或徑向(radial)）已經(jīng)移到屬性名的位置，而對于你如何指定漸變的方向和顏色也存在著差異。想更全面地了解IE10對于漸變語法的支持情況，請看Gradients (Windows).aspx)。例如：
彈性盒布局的方向
IE10中對于設(shè)置彈性盒布局的方向的語法已經(jīng)變了。欲了解IE10所支持的彈性盒布局語法，請看彈性盒（“Flexbox”）布局（Windows）.aspx)。例如：
圖片超鏈接的邊框
如果一個(gè)圖片作為超鏈接來用，IE在默認(rèn)情況下會給這個(gè)圖片加上一個(gè)藍(lán)色的高亮邊框，目的是強(qiáng)調(diào)這是一個(gè)超鏈接；Webkit則不會這么做。有一個(gè)簡單的辦法就是用下面的CSS指明作為超鏈接的圖片不加邊框：
a img { border: none; }邊框圖片
IE10目前還不支持border-image。為了保持你的頁面布局，我們建議你指定boder-style為solid，這樣可以保持邊框的寬（width），內(nèi)邊距（padding）和外邊距（margin）不變。（如果IE找不到它支持的邊框類型，他就會忽略那些值。）例如：
第四步：更新觸摸（touch）和指針(pointer)事件
Webkit和IE10對觸摸事件的處理是不同的。Webkit支持的觸摸接口是從鼠標(biāo)處理分離出來的；而IE10將觸摸（touch），鼠標(biāo)（mouse），觸控筆（stylus）分別封裝成單獨(dú)的接口（指針(pointer)）。指針事件模型也已經(jīng)作為標(biāo)準(zhǔn)提交給W3C下屬的指針事件工作小組。盡管接口有所不同，但事件模型通常是相同的，所以添加對指針事件的支持只需要修改很少的代碼。
監(jiān)聽指針事件
指針API使用的是標(biāo)準(zhǔn)的“down，move，up”事件模型。因此，很容易讓現(xiàn)有的事件監(jiān)聽對指針事件也生效。
處理指針事件
如果所有的事件由同一個(gè)監(jiān)聽來處理，比如像前面例子中提到的“eventHandlerName”，你需要根據(jù)事件類型把它們分離給單獨(dú)的處理程序。這很容易映射到現(xiàn)有的事件處理程序：
檢測主觸點(diǎn)
如前面所說，指針事件模型為每個(gè)觸點(diǎn)觸發(fā)單獨(dú)的事件。因此，如果你只想處理主觸點(diǎn)（比如單指拖動的情況），你就需要在“move”和“up”處理之前使用下面這條語句過濾掉非主觸點(diǎn)的觸摸點(diǎn)：
if (window.navigator.msPointerEnabled && !event.isPrimary) return;檢索坐標(biāo)
因?yàn)橹羔樖录Ｐ蜑槊總€(gè)觸點(diǎn)觸發(fā)單獨(dú)的事件，所以不需要從一系列的觸摸中檢索一個(gè)具體的索引?？梢允褂谩癳vent”對象中的pageX和pageY直接獲取到坐標(biāo)。并且很容易把它合并到現(xiàn)有的代碼中：
處理鼠標(biāo)輸入
IE10模型有一個(gè)優(yōu)勢即鼠標(biāo)輸入是作為相同的事件來處理的！因此，當(dāng)鼠標(biāo)劃過某個(gè)區(qū)域，IE10會觸發(fā)“move”事件。在單指拖拽這種情況下，你只想處理鼠標(biāo)按下并移動的事件。你可以使用下面的http://msdn.microsoft.com/en-us/library/windows/apps/hh466130.aspxpointerType屬性在移動（move）事件處理開始前檢測它：
if (window.navigator.msPointerEnabled && ((event.pointerType == event.MSPOINTER_TYPE_TOUCH && event.buttons != 1) || !event.isPrimary)) return;關(guān)閉默認(rèn)觸摸行為
IE10的指針事件模型要求你明確地指出頁面上哪些區(qū)域是要用自定義手勢處理（使用你剛才添加的代碼），哪些是要用默認(rèn)的手勢處理（手指點(diǎn)到頁面）。你可以為元素添加-ms-touch-action屬性來為他們選擇默認(rèn)的手勢處理。例如：
除了none這個(gè)屬性值外，Windows Phone 8上的IE10還支持pan-x和pan-y屬性值，它們可以指定瀏覽器默認(rèn)應(yīng)該處理橫向還是縱向的手勢，而JavaScript會處理其他的手勢。
第5步：處理非標(biāo)準(zhǔn)行為
最后一類更新在W3C中沒有相關(guān)的標(biāo)準(zhǔn)；因而Webkit和IE10處理也不同。但是，在所有這種情況下，Webkit和IE的解決方案可以無任何沖突地共存。
禁用鏈接高亮
包括iOS上的Safari和Windows Phone上的IE在內(nèi)的一些移動端瀏覽器會在超鏈接元素被觸摸（tap）的時(shí)候顯示一個(gè)半透明的高亮背景，來給用戶一個(gè)附加的反饋。然而，很多網(wǎng)站想要禁用這種默認(rèn)的行為來更好地控制自己站點(diǎn)的外觀和體驗(yàn)。
注意，msapplication-tap-highlight標(biāo)簽在頁面的
標(biāo)簽里只能出現(xiàn)一次，并且它會作用于整個(gè)頁面。這個(gè)標(biāo)簽只對移動版（Windows Phone）的IE10起作用，而對桌面版（Windows）的IE10沒有任何效果（譯注：經(jīng)本人測試，在微軟的Surface RT中添加這條禁用高亮的標(biāo)簽也不起作用，并不會禁用超鏈接點(diǎn)擊時(shí)的半透明背景）。
禁用下拉列表的本地樣式
Webkit的專有CSS屬性“-webkit-appearance”可以改變控件的外觀讓它們看起來更像是本地控件。很多情況下，IE10默認(rèn)就是這么處理的，因此它不需要專門指定樣式。
然而，一個(gè)特定的、常用的場景是用“-web-appearance”來禁用出現(xiàn)在<select>元素中的下拉箭頭，然后讓它顯示一個(gè)自定義的外觀，比如一個(gè)背景圖片。當(dāng)下拉箭頭被移除之后通常會設(shè)置一個(gè)text-indent的值，目的是不讓下拉列表項(xiàng)中的文字在頁面上露出來。（但是，它卻會在我們點(diǎn)擊屏幕的時(shí)候顯示一個(gè)彈出的控件）。下面所示是在IE10中如何達(dá)到相同的效果：
總結(jié)
本指南涵蓋了你為Webkit優(yōu)化的網(wǎng)站在IE10和其他兼容標(biāo)準(zhǔn)的瀏覽器上也能運(yùn)行得很好的最常用的適配方案。如果你有其他技巧是本文沒有涵蓋的，請你分享在下面的評論欄里。
在許多情況下，你網(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ì)——[五維互動]，2012年團(tuán)隊(duì)被“收編”并更名[創(chuàng)影互動]，遂只身來上海發(fā)展，現(xiàn)在就職于FlipScript。歡迎交流共勉：騰訊微博、個(gè)人博客。
如需轉(zhuǎn)載煩請注明出處：
英文原文：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
轉(zhuǎn)載于:https://www.cnblogs.com/yxlblogs/p/3985513.html
與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的让那些为Webkit优化的网站也能适配IE10（转载）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DDLog设置方法
- 下一篇： 两个实用的工具推荐：ResxManage