網頁的中英文字體對齊問題的解決

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

網頁的中英文字體對齊問題的解決

編輯：CSS進階教程

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

首先描述一下問題：

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

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

代碼拷貝框
<!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>Mtime時光網</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="http://www.mtime.com" id="aa" title="Mtime時光網"><img src="http://i.mtime.cn/20080731114455/images/logo_main.png" style="vertical-align:middle;" alt="Mtime時光網" /></a> <a href="">為什麼我老是對不齊呢？why??</a> </div> </body> </html>
[Ctrl+A 全部選擇然後拷貝]

那麼疑惑又來了，是什麼導致了中英文偏差呢？！解決辦法又是什麼呢？！於是經過我測試發現兩種情況（當然有可能有更多導致的情況。你們可以自己去嘗試），當中英文對象的相鄰元素擁有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>Mtime時光網</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="http://www.mtime.com" id="aa" title="Mtime時光網"><img src="http://i.mtime.cn/20080731114455/images/logo_main.png" alt="Mtime時光網" /></a> <a href="">為什麼我老是對不齊呢？why??</a> </div> </body> </html>
[Ctrl+A 全部選擇然後拷貝]

怎麼解決這個問題呢？！

先說第一種，就是臨近元素的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>Mtime時光網</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="http://www.mtime.com" id="aa" title="Mtime時光網"><img src="http://i.mtime.cn/20080731114455/images/logo_main.png" style="vertical-align:middle;" alt="Mtime時光網" /></a> <a href="" style="zoom:1;">為什麼我老是對不齊呢？why??</a> </div> </body> </html>
[Ctrl+A 全部選擇然後拷貝]

第二種情況就是父元素的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>Mtime時光網</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="http://www.mtime.com" id="aa" title="Mtime時光網"><img src="http://i.mtime.cn/20080731114455/images/logo_main.png" alt="Mtime時光網" /></a> <a href="" style="vertical-align:baseline;">為什麼我老是對不齊呢？why??</a> </div> </body> </html>
[Ctrl+A 全部選擇然後拷貝]

但是我們可以看到，下劃線好像貼的過緊，這個時候我們依然還需要給它加句zoom:1;觸發它的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>Mtime時光網</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="http://www.mtime.com" id="aa" title="Mtime時光網"><img src="http://i.mtime.cn/20080731114455/images/logo_main.png" alt="Mtime時光網" /></a> <a href="" style="zoom:1; vertical-align:baseline;">為什麼我老是對不齊呢？why??</a> </div> </body> </html>
[Ctrl+A 全部選擇然後拷貝]

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

上一頁:IE7與web標准設計（2）
下一頁:通過W3C XHTML1.0標准驗證的經驗

CSS進階教程

輕易創建css導航工具:CSS Tab Designer2: 網頁制作poluoluo文章簡介：你是否在為制作各種各樣的css導航而苦惱？現在有一款軟件可以解決你
巧用CSS濾鏡做圖案文字: <SPAN style="BACKGROUND-IMAGE: URL(
CSS教程(4)：通過實例學習CSS背景: 本教程介紹：1.如何僅顯示一次背景圖像，2.如何放置背景圖像，3.如何使用%來定位背景圖像。參考破洛

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

DIV CSS 佈局教程網

相關文章