Webkit优化网站在IE10兼容最优方案
日期：2014-04-25 浏览次数：21246 次
| 文章简介：本指南涵盖了你为Webkit优化的网站在IE10和其他兼容标准的浏览器上也能运行得很好的最常用的适配方案。如果你有其他技巧是本文没有涵盖的，请你分享在下面的评论栏里。 |
IE10对HTML5的广泛支持确保了你的网站在Windows Phone 8中比以往任何时候都能运行的好。之前，为了支持iOS或Android你可能会把Webkit作为专门优化的目标。现在可以让你为Webkit优化的网站也能轻松适配IE10。这意味着你将维护更少的代码，并且，可以给你的客户一个更好的体验。更让人欣喜的是，这些改变会让你的站点更符合HTML5标准。
本指南通过一系列的技巧、最佳实践和代码示例来帮助你把专为Webkit优化过的网站更加轻松地适配到IE10。在我们团队与一些颇受欢迎的网站一起合作来把他们为webkit优化的网站适配到IE10的过程中产生了本指南。
第一步：检测Windows Phone 8上的IE10
无论你在客户端还是服务端运行了user-agent（译注：以下统称ua）检测，首先要做的事情就是更新你的检测代码，把IE10和基于Webkit的浏览器同等对待。这是开始调整你的代码来支持IE10的一个基本条件。我们已经发布了一些关于如何使用ua检测IE10的最佳实践，然而下面才是我们希望得到的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之间仍存在着差异并影响到你的网站，那么你可以尝试采用特征检测或者其他为跨浏览器而写的最佳实践，而不是用ua检测。尤其重要的是，要在Windows Phone 8上的IE10中使用HTML5视频而不是基于flash的视频。
作为第一步工作的一部分，你也应该更新所有的第三方库，比如jQuery Mobile，或者其他第三方提供的服务，确保你能得到他们对浏览器的最新支持。比如，如果你使用了Typekit（译注：一个提供线上字体库的网站）你就要重新发布你的自定义字体套件，或者你给你的视频使用了Ooyala（译注：一个跨平台的视频播放器解决方案），那么你就需要更新到他们最新的播放器。
第二步：确保标准模式
接下来这步是要再次确定一下IE10会在最符合标准的模式.aspx)下渲染你的网站。使用标准模式会对最新的标准提供最大的支持，比如HTML5，CSS3，SVG等等。相反一些老的模式，比如“怪异模式”（quirks mode），只支持向后兼容。对于大多数网站来说，它们不需要做任何事情，因为默认就是标准模式。最简单的方法就是在每个页面的顶端包含HTML5 doctype:
<!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多列布局。
