本篇記錄工作中遇到的ie8兼容問題以及找到的解決方法
圓角的處理border-radius
??border-radius有兩個類型的值扎附，長度和百分比，是從左上角順時針到左下角四個角的簡寫模式结耀。CSS3屬性留夜，IE支持9+。（這里有兩篇文章直觀講解了border-radius的八個屬性值 ① ②）图甜。IE8的適配有幾種不同的方法碍粥，這里簡單做一下整理。
??1.ie-css3.htc 2.PIE.htc 3.border:dotted 4.另外的一些工具也有一些具则，不過沒有實際使用過即纲，暫留備份：IE7/8/9.js/eCSStender.js/border-radius.htc/cssSandpaper.js等。
??1 和 2 的htc文件屬于IE自有的behavior調(diào)用博肋，類似于封包的js腳本文件低斋，可以讓IE調(diào)用自有的VML畫筆畫出圓角。需要注意的地方是匪凡，htc文件不管寫在哪里膊畴，他的文件相對定位路徑總是相對于當前HTML文件的，所以behavior:url(PIE.htc);在復用到其它頁面時要注意文件指向問題病游；另外唇跨，htc文件是調(diào)用VML畫出效果覆蓋在原有元素上的，畫出的效果屬于原有元素的兄弟元素衬衬，如果原有元素位置默認靜止的話买猖，z-index屬性無法生效，自然不能實現(xiàn)兼容滋尉。此處應配合behavior增加position:relative/absolute;或在祖先元素里有position和z-index的定義玉控。根據(jù)htc文件的工作原理，其還可以實現(xiàn)box-shadow和gradient的漸變效果狮惜。另外高诺，在PIE.htc的實際應用中，VML繪圖在實現(xiàn)過程中出現(xiàn)了閃現(xiàn)的問題碾篡，從父元素盒子的左上角極快閃現(xiàn)到了需求位置虱而，暫時沒有解決。Mark
??3 的原理是張鑫旭博客中提出的开泽，邊框在dotted下牡拇，IE是正圓形的，chrome是方形。既如此那給一個足夠大的邊框诅迷，取其中一個點讓其顯示在有限區(qū)域的父級元素中佩番，就出現(xiàn)一個正圓。此處只是純CSS的運用罢杉，而且原生的IE8瀏覽器下這個圓還是比較毛糙的趟畏。這里更重要的是一種處理問題的思想，代碼只是實現(xiàn)目的的工具滩租，至于怎么使用這些工具赋秀，只局限于自己的想象。
Canvas
??canvas的兼容也是IE9+律想，IE8需要實現(xiàn)同樣是利用插件猎莲，這次遇到的問題是數(shù)據(jù)可視化的處理，開始的時候想直接用ECharts技即，翻文檔的時候看到了ExCanvas著洼，因為并沒有實際使用過，所以引進來做了次嘗試而叼。初次引用雖然實現(xiàn)了繪圖身笤，但是在數(shù)據(jù)顯示上出了點問題，canvas里的filltext()并沒有整合進去葵陵，不得已在網(wǎng)上下了補丁包打上液荸。這里IE重寫了html進行插入（可以看到在IE中文字是可以選中的，而canvas里是圖像）脱篙，雖然得到了文字娇钱，但是在IE里的定位沒有canvas中準確，需要重新適配绊困。這里用了canvas里的textAlign和textBaseline文搂，實際操作中通過ctx.textAlign = "right";和 ctx.textBaseline = 'hanging';配合起始位置坐標實現(xiàn)了雙邊效果大體一致。
vertical-align垂直居中
??這個垂直對齊的屬性總是不太好用秤朗，居中不生效细疚，之前遇到篇文章有介紹使用這個vertical-align的方法，給要垂直居中的元素添加一個width:0;height:100%的兄弟元素川梅，兩元素都取display:inline-block，然后再使用vertical-align:middle然遏，此時的居中效果就出現(xiàn)了贫途，需要注意兄弟元素的100%高度一定要生效，否則還是不行待侵。似乎這個屬性只有在有小伙伴對比的時候才會生效丢早。
