這是一個不太引人注意的問題，在IE瀏覽器下面中英文字體混排的時候，常常會出現不對齊的情況。 如圖1所示，在IE下當一行文字同時有英文跟中文的時候，鏈接下劃線就會發生折行，也就表示這個時候中英文是沒有對齊的?。‵IREFOX不受此問題影響） 圖1 IE瀏覽器下面中英文不對齊 經過測試，默認的直接在頁面里設置鏈接的時候是不會出現這個情況，如圖2！ 圖2 IE瀏覽器下面中英文對齊 那么疑惑又來了，是什么導致了中英文偏差呢？！解決辦法又是什么呢？！于是經過我測試發現兩種情況（當然有可能有更多導致的情況。你們可以自己去嘗試），當中英文對象的相鄰元素擁有vertical-align屬性設置（比如前面一張小圖片，或者文本框，我們需要把他們垂直對齊，一般都會給圖片，文本框（其他任意內聯塊元素）設置vertical-align:middle;來實現）的時候，那么就會影響到中英文的不對齊。 還有一種情況就是父元素（表格除外）擁有vertical-align屬性設置的時候，里面的子元素中英文也會對不齊。 !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="" 為什么我老是對不齊呢？why?? /a /div /body /html 怎么解決這個問題呢？！ 先說第一種，就是臨近元素的vertical-middle導致的無法對齊的偏差問題解決方案： 給中英文對象加一個zoom:1觸發它的haslayout,通過研究發現一旦它有了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="" 為什么我老是對不齊呢？why?? /a /div /body /html 第二種情況就是父元素的vertical-middle導致的無法對齊的偏差問題解決方案： 給中英文對象加句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 a href="" 為什么我老是對不齊呢？why?? /a /div /body /html 但是我們可以看到，下劃線好像貼的過緊，這個時候我們依然還需要給它加句zoom:1;觸發它的hasLayout來避免過緊貼合！。 a href="" vertical-align:baseline;" 為什么我老是對不齊呢？why?? /a 如果您碰到其他情況的中英文對不齊的情況，那么也可以嘗試使用上述兩種方法來解決。當然最保險最有效的莫過于就是直接中英文都統一使用宋體 本文作者:html教程
