本指南通過一系列的技巧、最佳實踐和代碼示例來幫助你把專為webkit優化過的網站更加輕松地适配到ie10。在我們團隊與一些頗受歡迎的網站一起合作來把他們為webkit優化的網站适配到ie10的過程中産生了本指南。
隻要html 4.0+和xhtml 1.0+的 doctype不指定“transitional”，那麼它們預設來說也使用标準模式渲染。
如果你是在區域網路（或localhost）測試你的網頁，你需要臨時強制使用标準模式，因為，ie在内網（intranet）預設使用向後相容模式。你可以在頁面的<code><head></code>标簽内添加下面的<code><meta></code>标簽來強制ie使用标準模式，或者添加等效的http頭：
當你完成開發并把網站部署到網際網路上的時候你就可以删除這個<code><meta></code>标簽，因為現在已經不再需要它了。
以下的一些場景你應該盡量小心，因為他們會讓你的網站失去标準模式：
不要包含doctype的聲明，而要使用上面提到的html5的doctype。
不要指定一個“tansitional”的doctype，删除trasitional這樣的字眼，或者幹脆采用html5的doctype。
不要用帶有ie=9（或者更早）的x-ua-compatible頭來強制使用具體的ie模式，而要指定ie=edge或者完全移除x-ua-compatible頭，并且使用html5的doctype。
現在要準備更新你的代碼了。最簡單的更新就是先在專為webkit寫的css和javascript處添加上相容标準的（無字首的）或者是加了微軟字首的（microsoft-prefixed）版本的代碼。可能你之前就知曉一些最佳實踐的方法，已經在你的代碼中包含了很多的字首。但除此以外，你還有一些其他的css和js需要重新調整一下。
注意，這些适用于css屬性和等效的javascript調用，比如：
下面是一個常用的webkit css屬性和對應被ie10所支援的标準（無字首）格式清單。每個屬性都有個能讓javascript通路的等效樣式屬性。比如，css中的border-radius就可以通過javascript的<code>object.style.borderradius</code>來通路。
下面這些使用webkit字首的屬性在ie10中也同樣支援，隻不過要加微軟的字首（“-ms”），因為w3c的相應标準還沒有發展到足以使用無字首的地步。你可以移步這裡了解微軟在此方面的更多進展。注意，你在添加“-ms”字首的時候，你也可以選擇順便添加無字首的版本以便向前相容。
如果一個圖檔作為超連結來用，ie在預設情況下會給這個圖檔加上一個藍色的高亮邊框，目的是強調這是一個超連結；webkit則不會這麼做。有一個簡單的辦法就是用下面的css指明作為超連結的圖檔不加邊框：
ie10目前還不支援border-image。為了保持你的頁面布局，我們建議你指定boder-style為solid，這樣可以保持邊框的寬（width），内邊距（padding）和外邊距（margin）不變。（如果ie找不到它支援的邊框類型，他就會忽略那些值。）例如：
指針api使用的是标準的“down，move，up”事件模型。是以，很容易讓現有的事件監聽對指針事件也生效。
如果所有的事件由同一個監聽來處理，比如像前面例子中提到的“eventhandlername”，你需要根據事件類型把它們分離給單獨的處理程式。這很容易映射到現有的事件處理程式：
如前面所說，指針事件模型為每個觸點觸發單獨的事件。是以，如果你隻想處理主觸點（比如單指拖動的情況），你就需要在“move”和“up”處理之前使用下面這條語句過濾掉非主觸點的觸摸點：
因為指針事件模型為每個觸點觸發單獨的事件，是以不需要從一系列的觸摸中檢索一個具體的索引。可以使用“event”對象中的pagex和pagey直接擷取到坐标。并且很容易把它合并到現有的代碼中：
ie10的指針事件模型要求你明确地指出頁面上哪些區域是要用自定義手勢處理（使用你剛才添加的代碼），哪些是要用預設的手勢處理（手指點到頁面）。你可以為元素添加-ms-touch-action屬性來為他們選擇預設的手勢處理。例如：
最後一類更新在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”來禁用出現在<code><select></code>元素中的下拉箭頭，然後讓它顯示一個自定義的外觀，比如一個背景圖檔。當下拉箭頭被移除之後通常會設定一個text-indent的值，目的是不讓下拉清單項中的文字在頁面上露出來。（但是，它卻會在我們點選螢幕的時候顯示一個彈出的控件）。下面所示是在ie10中如何達到相同的效果：
本指南涵蓋了你為webkit優化的網站在ie10和其他相容标準的浏覽器上也能運作得很好的最常用的适配方案。如果你有其他技巧是本文沒有涵蓋的，請你分享在下面的評論欄裡。
在許多情況下，你網站中實際代碼的修改量是很小的，這主要取決于網站中使用到的特性和你已經在你的代碼中應用的最佳實踐。那麼，開始吧，讓windows phone 8的使用者也能體驗到最好的網站。
作者：白樹