DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 網頁的中英文字體對齊問題的解決
網頁的中英文字體對齊問題的解決
編輯:CSS詳解     

如果不是因為總監審查嚴格,一定要求這個細節解決掉,也許我也不會去深究根源性的解決辦法,再此感謝MTIME負責而嚴格的同事。

首先描述一下問題:

如果所示,在IE下當一行文字同時有英文跟中文的時候,鏈接下劃線就會發生折行,也就表示這個時候中英文是沒有對齊的!(Firefox不受此問題影響)

但是經過測試,默認的直接在頁面裡設置鏈接的時候是不會出現這個情況的!

代碼拷貝框

[Ctrl+A 全部選擇 然後拷貝]

那麼疑惑又來了,是什麼導致了中英文偏差呢?!解決辦法又是什麼呢?!於是經過我測試發現兩種情況(當然有可能有更多導致的情況。你們可以自己去嘗試),當中英文對象的相鄰元素擁有vertical-align屬性設置(比如前面一張小圖片,或者文本框,我們需要把他們垂直對齊,一般都會給圖片,文本框(其他任意內聯塊元素)設置vertical-align:middle;來實現)的時候,那麼就會影響到中英文的不對齊。

還有一種情況就是父元素(表格除外)擁有vertical-align屬性設置的時候,裡面的子元素中英文也會對不齊。

代碼拷貝框

[Ctrl+A 全部選擇 然後拷貝]

怎麼解決這個問題呢?!

先說第一種,就是臨近元素的vertical-middle導致的無法對齊的偏差問題解決方案:

給中英文對象加一個zoom:1觸發它的haslayout,通過研究發現一旦它有了haslayout之後,中英文就不會對不齊。

代碼拷貝框

[Ctrl+A 全部選擇 然後拷貝]

第二種情況就是父元素的vertical-middle導致的無法對齊的偏差問題解決方案:

給中英文對象加句vertical-align:baseline就可以解決!

代碼拷貝框

[Ctrl+A 全部選擇 然後拷貝]

但是我們可以看到,下劃線好像貼的過緊,這個時候我們依然還需要給它加句zoom:1;觸發它的hasLayout來避免過緊貼合!。

代碼拷貝框

[Ctrl+A 全部選擇 然後拷貝]

如果您碰到其他情況的中英文對不齊的情況,那麼也可以嘗試使用上述兩種方法來解決。當然最保險最有效的莫過於就是直接中英文都統一使用宋體。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved