微信 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個：
1.隻添加了-webkit 字首的樣式并未添加向前相容的寫法，在ie10下頁面無css3樣式特效
錯誤寫法：
正确寫法：
2.彈性布局(display:box 或者 display:flex)，在ie10下頁面錯亂
錯誤展現：
正确展現：
3.不支援webkit私有樣式，如-webkit-appearance、-webkit-box-reflect等，在ie10下頁面無webkit樣式特效
做到向前相容，代碼中除了帶有浏覽器廠商字首外的樣式，還需要添加w3c标準的寫法，這裡整理了常見css3屬性，其中 wp ie 10 是為ie10準備的，代碼如下：
彈性布局出現以來，幾行簡單的代碼讓網頁布局變得非常靈活，對此微軟也不甘落後，2012年8月，internet explorer 10 引入了對 w3c css 彈性框（“flexbox”）布局子產品的支援，
可以看出 ie10 的樣式寫法與 display:flex 不一樣，且是帶有供應商字首(-ms-)，不過這已經不成問題，因為彈性布局在 ie10 中我們可以放心使用啦，那麼，結合舊版彈性布局display:box 、新版彈性布局 display:flex 、ie10彈性布局 display: -ms-flexbox ，最終得到的彈性布局樣式如下：
強烈建議移動前端開發的同學加強對這塊的學習，因為簡單實用，這裡推薦幾個彈性布局的學習網址：
<a href="http://the-echoplex.net/flexyboxes/" target="_blank">flexyboxes</a>
<a href="http://www.w3cplus.com/css3/old-flexbox-and-new-flexbox.html" target="_blank">“老”的flexbox和“新”的flexbox</a>
<a href="http://www.w3cplus.com/css3/advanced-cross-browser-flexbox.html" target="_blank">跨浏覽器的flexbox</a>
由于 webkit 浏覽器有不少私有屬性，如 -webkit-appearance、-webkit-box-reflect 等，ie10 目前還有類似的寫法來支援，那麼，我們可使用 ie10 hack 來做好相容，保證頁面結構和功能正常的前提，做好差異化體驗~
此文章作為迎接微信 winphone 5.0 版本做的準備，winphone 版的微信跟 ios、android 版的微信存在很多不同體驗，而當它正式釋出後，可能還有更多的問題需要關注，像分享到朋友圈、頂部和底部傳回導航等，原生界面的布局都不同，那麼對互動設計、視覺設計産出的設計稿也可能存在差異化的體驗，這也是對前端的響應式設計提出更高要求，讓我們拭目以待。
最後提前祝大家元旦快樂~
作者：白樹