微信 Android 5.1 和 iPhone 5.1 已正式发布了，据说本12月底，微信将推出 Winphone 5.0版本，全面支持微信支付，它绑定 IE10 浏览器，那么做微信公众号的 H5 页面，除了做好 webkit 兼容外，IE10 的兼容也是必不可少的。
对Windows Phone 8 IE10 的测试，如果没有winphone 8 的手机，在电脑win8系统上也是可以测试的，打开IE10，按 F12 或菜单工具->F12 开发者工具，点击工具->更改用户代理字符串（UA String），然后点击 IE10 for Windows Phone 8，可模拟Windows Phone 8版IE10。
通过排查做过的微信公众号H5页面在IE10下的展现，发现了不少问题，总结下主要有3个：
正确写法：
正确展现：
对上面提到的3个问题，这里给出一套方案，经过测试后兼容 Winphone IE10、Android2.1+、Ios3.2+ 系统
1.向前兼容的写法
做到向前兼容，代码中除了带有浏览器厂商前缀外的样式，还需要添加W3c标准的写法，这里整理了常见css3属性，其中WP IE 10是为IE10准备的，代码如下：
弹性布局出现以来，几行简单的代码让网页布局变得非常灵活，对此微软也不甘落后，2012年8月，Internet Explorer 10 引入了对 W3C CSS 弹性框（“Flexbox”）布局模块的支持，
打开，找到css栏目中的，对 IE10 弹性布局进行了详细的介绍：
可以看出 IE10 的样式写法与 display:flex 不一样，且是带有供应商前缀(-ms-)，不过这已经不成问题，因为弹性布局在 IE10 中我们可以放心使用啦，那么，结合旧版弹性布局display:box 、新版弹性布局 display:flex 、IE10弹性布局 display: -ms-flexbox ，最终得到的弹性布局样式如下：
强烈建议移动前端开发的同学加强对这块的学习，因为简单实用，这里推荐几个弹性布局的学习网址：
由于 webkit 浏览器有不少私有属性，如 -webkit-appearance、-webkit-Box-reflect 等，IE10 目前还有类似的写法来支持，那么，我们可使用 IE10 hack 来做好兼容，保证页面结构和功能正常的前提，做好差异化体验~
此文章作为迎接微信 winphone 5.0 版本做的准备，winphone 版的微信跟 ios、android 版的微信存在很多不同体验，而当它正式发布后，可能还有更多的问题需要关注，像分享到朋友圈、顶部和底部返回导航等，原生界面的布局都不同，那么对交互设计、视觉设计产出的设计稿也可能存在差异化的体验，这也是对前端的响应式设计提出更高要求，让我们拭目以待。
最后提前祝大家元旦快乐~
