【原】迎接微信winphone 5.0 版本的IE10樣式兼容

微信 Android 5.1 和 iPhone 5.1 已正式發佈了，聽說本12月底，微信將推出 Winphone 5.0版本，全面支持微信支付，它綁定 IE10 瀏覽器，那麼作微信公衆號的 H5 頁面，除了作好 webkit 兼容外，IE10 的兼容也是必不可少的。

曾經寫過《常見CSS3屬性對ios&android&winphone的支持》一文，當時寫過對Windows Phone 7 和Windows Phone 8的對應的瀏覽器分別是IE9和IE10作好兼容，但因爲產品的特性對 Winphone 支持不友好，項目組也沒有對 IE9 和 IE10 進行特別的處理，如今微信支付的到了讓咱們從新開啓了對它重視，即使如今 Winphone 8 只有少部分用戶~

對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樣式特效

錯誤展示：

正確展示：

對上面提到的3個問題，這裏給出一套方案，通過測試後兼容 Winphone IE十、Android2.1+、Ios3.2+ 系統

1.向前兼容的寫法

作到向前兼容，代碼中除了帶有瀏覽器廠商前綴外的樣式，還須要添加W3c標準的寫法，這裏整理了常見css3屬性，其中 WP IE 10 是爲IE10準備的，代碼以下：

/* 圓角邊框 */
.border-radius {
  -webkit-border-radius: 12px; /* android 2.1, ios 3.2 */
          border-radius: 12px; /* android 2.2+, ios 4.0+, WP IE 10 */
}
/* 投影 */
.box_shadow {
  -webkit-box-shadow: 0px 0px 4px 0px #FFFFFF; /* android 2.1-3.0, ios 4.0.2-4.3 */
          box-shadow: 0px 0px 4px 0px #FFFFFF; /* android 4.0+, ios 5+, WP IE 10 */
}
/* 背景尺寸 */
.background-size{
  -webkit-background-size: 100% 100%; /* android 2.1-2.3, ios 3.2 */
          background-size: 100% 100%; /* android 3.0+, ios 4.0+, WP IE 10 */
}
/* 邊框盒 */
box-sizing{
  -webkit-box-sizing: border-box; /* android 2.1-3.0, ios 3.2-4.3 */
          box-sizing: border-box; /* android 4.0+, ios 5.0+, WP IE 10 */
}
/* 線性漸變 */
.linear-gradient{
  background-color: #444444;/* 因爲部分android機器對該屬性的渲染效果不友好，可能會出現無顏色漸變，使用時注意添加背景顏色(background-color) */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* 老版本寫法 Android 2.1-4.3 ios3.2-6.1 */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* 新版本寫法 Android 4.0+ iOS 5+ */
  background-image: linear-gradient(to bottom, #444444, #999999); /* Android 4.4, ios 7.0, WP IE 10 */
}
/* 旋轉 */
.rotate {
  -webkit-transform: rotate(7.5deg);  /* android 2.1+, ios 3.2+ */
          transform: rotate(7.5deg);  /* WP IE 10 */
}

2.兼容 webkit 和 IE10 的彈性佈局

彈性佈局出現以來，幾行簡單的代碼讓網頁佈局變得很是靈活，對此微軟也不甘落後，2012年8月，Internet Explorer 10 引入了對 W3C CSS 彈性框（「Flexbox」）佈局模塊的支持，

打開 Internet Explorer 10 開發人員指南 ，找到css欄目中的 彈性框 ("Flexbox") 佈局 ，對 IE10 彈性佈局進行了詳細的介紹：

 

能夠看出 IE10 的樣式寫法與 display:flex 不同，且是帶有供應商前綴(-ms-)，不過這已經不成問題，由於彈性佈局在 IE10 中咱們能夠放心使用啦，那麼，結合舊版彈性佈局display:box 、新版彈性佈局 display:flex 、IE10彈性佈局 display: -ms-flexbox ，最終獲得的彈性佈局樣式以下：

.flex{
    /* 設置彈性佈局 */
    display:-webkit-box;/* android 2.1-3.0, ios 3.2-4.3 */
    display:-webkit-flex;/* Chrome 21+ */
    display:-ms-flexbox;/* WP IE 10 */
    display:flex;/* android 4.4 */
}
.flex-direction-column{
    /* 設置彈性佈局的方向，子元素按照在源文檔中聲明的順序從上到下顯示 */
    -webkit-box-orient: vertical;/* android 2.1-3.0, ios 3.2-4.3 */
    -webkit-flex-direction: column;/* Chrome 21+ */
    -ms-flex-direction: column;/* WP IE 10 */
    flex-direction: column;/* android 4.4 */
}
.flex-1{
   /* 子元素自動佔據剩餘的空間 */
    -webkit-box-flex:1;/* android 2.1-3.0, ios 3.2-4.3 */
    -webkit-flex:1;/* Chrome 21+ */
    -ms-flex:1;/* WP IE 10 */
    flex:1;/* android 4.4 */
}
.flex-pack-center{
    /* 水平佈局下的子元素 水平居中 */
    -webkit-box-pack: center;/* android 2.1-3.0, ios 3.2-4.3 */
    -webkit-justify-content: center;/* Chrome 21+ */
    -ms-flex-pack: center;/* WP IE 10 */
    justify-content: center;/* android 4.4 */
}
.flex-align-center{
    /* 水平佈局下的子元素 垂直居中 */
    -webkit-box-align: center;/* android 2.1-3.0, ios 3.2-4.3 */
    -webkit-align-items: center;/* Chrome 21+ */
    -ms-flex-align: center;/* WP IE 10 */
    align-items: center;/* android 4.4 */
}
.flex-pack-justify{
    /* 水平佈局下的子元素 2端對齊 */
    -webkit-box-pack: justify;/* android 2.1-3.0, ios 3.2-4.3 */
    -webkit-justify-content: space-between;/* Chrome 21+ */
    -ms-flex-pack: justify;/* WP IE 10 */
    justify-content: space-between;/* android 4.4 */
}

強烈建議移動前端開發的同窗增強對這塊的學習，由於簡單實用，這裏推薦幾個彈性佈局的學習網址：

flexyboxes

「老」的Flexbox和「新」的Flexbox

跨瀏覽器的Flexbox

3.使用 IE10 hack 的兼容方案

因爲 webkit 瀏覽器有很多私有屬性，如 -webkit-appearance、-webkit-box-reflect 等，IE10 目前還有相似的寫法來支持，那麼，咱們可以使用 IE10 hack 來作好兼容，保證頁面結構和功能正常的前提，作好差別化體驗~

/* 媒體查詢方法一 -ms-high-contrast 是IE10的私有屬性，結合媒體查詢，可使用它來作 IE10的兼容*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* 這裏寫入IE10的樣式 */  
}
/* 媒體查詢方法二 該方案兼容IE9和IE10*/
@media screen and (min-width:0\0) {  
    /* 這裏寫入IE10的樣式  */  
}

 更多 IE10 hack 的兼容方案請見：http://www.cnblogs.com/PeunZhang/archive/2012/12/13/2815914.html

 

此文章做爲迎接微信 winphone 5.0 版本作的準備，winphone 版的微信跟 ios、android 版的微信存在不少不一樣體驗，而當它正式發佈後，可能還有更多的問題須要關注，像分享到朋友圈、頂部和底部返回導航等，原生界面的佈局都不一樣，那麼對交互設計、視覺設計產出的設計稿也可能存在差別化的體驗，這也是對前端的響應式設計提出更高要求，讓咱們拭目以待。

最後提早祝你們元旦快樂~