前陣子對公司框架的前端優化中，使用了字型圖示（iconfont）來做模組的圖示集，供使用者進行配置選擇。
字型圖示的有非常好的靈活性和復用性，可以像處理文字一樣通過font-size進行大小設定、通過color來直接配色，如果系統整體設計是比較扁平化的，瀏覽器相容要求ie8+，並且在系統中需要一套圖示集的話，選擇字型圖示來替代傳統的png圖示應該說是乙個非常有價效比的方案。
具體字型圖示的製作和使用，有乙個非常棒的服務站點：www.iconfont.cn，在這裡感謝阿里媽媽前端團隊。
上面大致介紹了下iconfont的優點，下面開始進入正題。
iconfont是不錯，可惜實際專案中，對ie8要有較好的支援。
一般我們通過css的:before:after偽類來實現iconfont的使用，如：
還好，ie8是支援:before:after偽類的，本以為可以無憂無慮的直接使用了，結果在測試過程中發現了乙個坑，拿乙個具體案例來說明。
有個選單項，用a標籤來表示：
大致效果如下：
當使用者點選該選單項時，需要高亮該選單項，在a標籤上追加乙個狀態樣式.active：
通過以下css rule來達到目的：
預期的（或者正常的）效果如下：
但是在坑爹的ie8中，實際的效果是這樣的：
在ie8中通過class來改變字型圖示的視覺狀態（這裡是color）並沒有起到作用，引用圖示樣式的元素（此例中是i.item-icon.icon-addcircle）並沒有進行重繪（redraw）來更新狀態。
明確問題後去google了一下，發現ie8確實有這麼乙個bug。
使用:before:after偽類的元素，一般與content屬性配合使用，在ie8中，通過樣式來動態改變content偽元素的視覺表現，不會觸發偽元素的重繪（redraw）行為，除非content屬性的值（內容）發生變化，從而強制瀏覽器對其進行重繪。
那麼解決思路就是強制元素重繪了，根據上述原理**如下：
其中.content-empty定義如下：
然後每次在偽類元素上作用完樣式後，使用util.redrawpseudoel(el)即可。
相容ie8的元素居中
今天重新回來修改一下彈窗居中這個功能 彈窗，就是將乙個框框放在螢幕中間，這個框的高度不確定。不需要相容ie8及以下，css用下面這個 完全夠了 pop pop content有時要相容ie8 那麼就要如下 由於父元素是固定定位，採用父元素display table cell vertical ali...
IE8中的記憶體洩露
最近開發的時候對頁面使用了定時的區域性更新，結果在ie6，7和firefox下，一切正常，而在ie8下過上幾個小時就瀏覽器就崩潰了，顯示是記憶體溢位，我以為是 寫的不好導致記憶體洩露，但是ie6，7又正常，調查了一下，原來這是ie8的bug。size large 問題點 size 在ie8中，生成特...
IE8中相容性模式
x ua compatible是針對ie8新加的乙個設定，對於ie8之外的瀏覽器是不識別的，這個區別與content ie 7 在無論頁面是否包含指令，都像是使用了 windows internet explorer 7的標準模式。而content ie emulateie7 模式遵循指令。對於多數...