關於IE下英文字型跟中文字型不能對齊的根源以及解決辦法
阿新 • • 發佈：2018-12-30
問題描述：
在IE下當一行文字同時有英文跟中文的時候，連結下劃線就會發生折行，也就表示這個時候中英文是沒有對齊的！（FIREFOX不受此問題影響）
但是經過測試，預設的直接在頁面裡設定連結的時候是不會出現這個情況的！
那麼疑惑又來了，是什麼導致了中英文偏差呢？！解決辦法又是什麼呢？！ 解決方法： 於是經過我測試發現兩種情況（當然有可能有更多導致的情況。你們可以自己去嘗試），當中英文物件的相鄰元素擁有vertical-align屬性設定（比如前面一張小圖片，或者文字框，我們需要把他們垂直對齊，一般都會給圖片，文字框（其他任意內聯塊元素）設定vertical-align:middle;來實現）的時候，那麼就會影響到中英文的不對齊。
還有一種情況就是父元素（表格除外）擁有vertical-align屬性設定的時候，裡面的子元素中英文也會對不齊。
怎麼解決這個問題呢？！
先說第一種，就是臨近元素的vertical-middle導致的無法對齊的偏差問題解決方案：
給中英文物件加一個zoom:1觸發它的haslayout,通過研究發現一旦它有了haslayout之後，中英文就不會對不齊。
第二種情況就是父元素的vertical-middle導致的無法對齊的偏差問題解決方案：
給中英文物件加句vertical-align:baseline就可以解決！
但是我們可以看到，下劃線好像貼的過緊，這個時候我們依然還需要給它加句zoom:1;觸發它的hasLayout來避免過緊貼合！。
如果您碰到其他情況的中英文對不齊的情況，那麼也可以嘗試使用上述兩種方法來解決。當然最保險最有效的莫過於就是直接中英文都統一使用宋體。