這是一個(gè)不太引人注意的問題，在IE瀏覽器下面中英文字體混排的時(shí)候，常常會出現(xiàn)不對齊的情況。
如圖1所示，在IE下當(dāng)一行文字同時(shí)有英文跟中文的時(shí)候，鏈接下劃線就會發(fā)生折行，也就表示這個(gè)時(shí)候中英文是沒有對齊的�。‵IREFOX不受此問題影響）
圖1 IE瀏覽器下面中英文不對齊
經(jīng)過測試，默認(rèn)的直接在頁面里設(shè)置鏈接的時(shí)候是不會出現(xiàn)這個(gè)情況，如圖2！
圖2 IE瀏覽器下面中英文對齊
那么疑惑又來了，是什么導(dǎo)致了中英文偏差呢？！解決辦法又是什么呢？！于是經(jīng)過我測試發(fā)現(xiàn)兩種情況（當(dāng)然有可能有更多導(dǎo)致的情況。你們可以自己去嘗試），當(dāng)中英文對象的相鄰元素?fù)碛衯ertical-align屬性設(shè)置（比如前面一張小圖片，或者文本框，我們需要把他們垂直對齊，一般都會給圖片，文本框（其他任意內(nèi)聯(lián)塊元素）設(shè)置vertical-align:middle;來實(shí)現(xiàn)）的時(shí)候，那么就會影響到中英文的不對齊。
還有一種情況就是父元素（表格除外）擁有vertical-align屬性設(shè)置的時(shí)候，里面的子元素中英文也會對不齊。
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta content="text/html; charset=utf-8" http-equiv="Content-Type" /＞
＜title＞Test＜/title＞
＜style type="text/css"＞
* { margin:0; padding:0; }
html { background:#fff; }
body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; color:#333; }
＜/style＞
＜/head＞
＜body＞
＜div style="vertical-align:middle;"＞
＜a href=""＞為什么我老是對不齊呢？why??＜/a＞
＜/div＞
＜/body＞
＜/html＞
怎么解決這個(gè)問題呢？！
先說第一種，就是臨近元素的vertical-middle導(dǎo)致的無法對齊的偏差問題解決方案：
給中英文對象加一個(gè)zoom:1觸發(fā)它的haslayout,通過研究發(fā)現(xiàn)一旦它有了haslayout之后，中英文就不會對不齊。
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta content="text/html; charset=utf-8" http-equiv="Content-Type" /＞
＜title＞Test＜/title＞
＜style type="text/css"＞
* { margin:0; padding:0; }
html { background:#fff; }
body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; color:#333; }
＜/style＞
＜/head＞
＜body＞
＜div＞
＜a href="" style="zoom:1;"＞為什么我老是對不齊呢？why??＜/a＞
＜/div＞
＜/body＞
＜/html＞
第二種情況就是父元素的vertical-middle導(dǎo)致的無法對齊的偏差問題解決方案：
給中英文對象加句vertical-align:baseline就可以解決！
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta content="text/html; charset=utf-8" http-equiv="Content-Type" /＞
＜title＞Test＜/title＞
＜style type="text/css"＞
* { margin:0; padding:0; }
html { background:#fff; }
body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; color:#333; }
＜/style＞
＜/head＞
＜body＞
＜div style="vertical-align:middle;"＞
＜a href="" style="vertical-align:baseline;"＞為什么我老是對不齊呢？why??＜/a＞
＜/div＞
＜/body＞
＜/html＞
但是我們可以看到，下劃線好像貼的過緊，這個(gè)時(shí)候我們依然還需要給它加句zoom:1;觸發(fā)它的hasLayout來避免過緊貼合！。
＜a href="" style="zoom:1;"vertical-align:baseline;"＞為什么我老是對不齊呢？why??＜/a＞ |
