WP8.1的IE11为何不支持淘宝网触屏版?

IT之家（www.ithome.com）：WP8.1的IE11为何不支持淘宝网触屏版？

众所周知IE浏览器有自己的一个内核（简称IE内核），WP8.1系统的自带移动版IE11浏览器，但为什么iOS、Android都可以正常登陆新版的触屏版淘宝m.taobao.com，而IE浏览器却不行呢？这里要提到CSS层叠样式表。

引用百度百科的内容：CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

在CSS中包含了大量的属性用来修饰网页元素的样式，比如background-color用来设定背景色；font-size用来设定字体的尺寸等等，但有的属性会有一个内核名称前缀，主要有-ms-,-webkit-,-moz-,-o-四种前缀，其内核所代表的浏览器分别是IE浏览器，谷歌浏览器，火狐浏览器，欧朋浏览器，此外苹果的Safari浏览器也是采用webkit内核。

以笔者电脑装的桌面浏览器为例，分别是最新版IE11浏览器和Chorme浏览器，都登陆m.taobao.com并调整窗口大小模拟手机端如图：

左边是微软IE11浏览器，右边是谷歌Chrome浏览器

很明显发现IE浏览器下页面布局出现了问题，而在在谷歌浏览器下是正常的。点开左下角的“淘”这个快捷工具按钮，也同样出现了IE11显示不正确的问题如图：

左边是微软IE11浏览器，右边是谷歌Chrome浏览器

现在查看这个“淘”按钮的源码在右侧查看其中的CSS属性如图：

IE11浏览器CSS属性

谷歌浏览器CSS属性

可以看到其中一些属性前面添加了-webkit-前缀，这就指定了只能在webkit内核的浏览器上实现这些属性而IE不能实现，现在我临时修改其中一个属性-webkit-background-size，把前缀去掉后面的参数不变，因为CSS和HTML一样是被浏览器解释执行的不需要编译修改后就能直接看到效果，如图：

修改CSS属性后，IE11浏览器显示

修改CSS属性后，谷歌浏览器显示

现在显示就正常了！而且即使前缀去掉了在谷歌浏览器下也没有出现问题。

很多人经常说IE对HTML5支持性不好，但有时问题不是出在HTML5标签上，而是出在CSS属性上，因为存在内核名前缀这个严重的问题！如果使用火狐浏览器或Opera浏览器登陆页面也会出现问题，除非网站开发人员事先检测浏览器的代理类型再针对性设计网页。

W3C组织的官方文档中只制定了没有前缀的通用属性，除了通用属性外各个内核浏览器的厂商自己也制定了一部分自家专有属性，为避免名称重复所以添加内核名称前缀以示区分。就比如这个background-size属性，即使添加了-ms-前缀IE也识别不了因为IE内核并没有设定“-ms-background-size”属性。

WP8搭载的移动版IE10浏览器对HTML5和CSS3支持性还不如桌面IE11浏览器，所以手机上登陆网站就几乎显示不出东西，因为手机还是WP8，不知道WP8.1上IE11现在能显示多少内容。

以上笔者只是在这个网站中选取了其中一个地方做了修改。所以说新版触屏版淘宝网页完全是针对iOS、安卓设计的一点不过分，当下移动互联网环境是以Webkit为主导，在微软不允许WP系统运行非IE内核浏览器的前提下，兼不兼顾WP这个第三类平台完全是淘宝官方的决策。

其实淘宝只要重新把特定属性修改一下换成通用属性，重新部署到服务器，WP8马上就能显示正常，而这也花费不了多长时间，但淘宝就是不干。

WP8.1更新内容、WP8升级WP8.1教程，尽在IT之家- 《WP8.1专题》和《WP8.1论坛》。