| 導購 | 订阅 | 在线投稿
分享
 
 
 

CSS討論:IE下中英文字體下劃線對齊問題

來源:互聯網  2008-08-15 06:28:37  評論

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

CSS討論:IE下中英文字體下劃線對齊問題

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

代碼

<!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>www.devdao.com</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.devdao.com" id="aa" title="www.devdao.com"><img src="http://www.devdao.com/images/logo.gif" style="vertical-align:middle;" alt="www.devdao.com" /></a> <a href="">爲什麽我老是對不齊呢?why??</a> </div> </body> </html>

CSS討論: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>www.devdao.com</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.devdao.com" id="aa" title="www.devdao.com"><img src="http://www.devdao.com/images/logo.gif" alt="www.devdao.com" /></a> <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>www.devdao.com</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.devdao.com" id="aa" title="www.devdao.com"><img src="http://www.devdao.com/images/logo.gif" style="vertical-align:middle;" alt="www.devdao.com" /></a> <a href="" style="zoom:1;">爲什麽我老是對不齊呢?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>www.devdao.com</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.devdao.com" id="aa" title="www.devdao.com"><img src="http://www.devdao.com/images/logo.gif" alt="www.devdao.com" /></a> <a href="" style="vertical-align:baseline;">爲什麽我老是對不齊呢?why??</a> </div> </body> </html>

但是我們可以看到,下劃線好像貼的過緊,這個時候我們依然還需要給它加句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>www.devdao.com</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.devdao.com" id="aa" title="www.devdao.com"><img src="http://www.devdao.com/images/logo.gif" alt="www.devdao.com" /></a> <a href="" style="zoom:1; vertical-align:baseline;">爲什麽我老是對不齊呢?why??</a> </div> </body> </html>

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

  首先描述一下問題:如圖所示,在IE下當一行文字同時有英文跟中文的時候,鏈接下劃線就會發生折行,也就表示這個時候中英文是沒有對齊的!(Firefox不受此問題影響) [url=/bbs/detail_1846413.html][img]http://image.wangchao.net.cn/it/1323268970854.jpg[/img][/url]   但是經過測試,默認的直接在頁面裏設置鏈接的時候是不會出現這個情況的!   代碼 <!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>www.devdao.com</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.devdao.com" id="aa" title="www.devdao.com"><img src="http://www.devdao.com/images/logo.gif" style="vertical-align:middle;" alt="www.devdao.com" /></a> <a href="">爲什麽我老是對不齊呢?why??</a> </div> </body> </html> [url=/bbs/detail_1846413.html][img]http://image.wangchao.net.cn/it/1323268970943.jpg[/img][/url]   那麽疑惑又來了,是什麽導致了中英文偏差呢?!解決辦法又是什麽呢?!于是經過我測試發現兩種情況(當然有可能有更多導致的情況。你們可以自己去嘗試),當中英文對象的相鄰元素擁有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>www.devdao.com</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.devdao.com" id="aa" title="www.devdao.com"><img src="http://www.devdao.com/images/logo.gif" alt="www.devdao.com" /></a> <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>www.devdao.com</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.devdao.com" id="aa" title="www.devdao.com"><img src="http://www.devdao.com/images/logo.gif" style="vertical-align:middle;" alt="www.devdao.com" /></a> <a href="" style="zoom:1;">爲什麽我老是對不齊呢?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>www.devdao.com</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.devdao.com" id="aa" title="www.devdao.com"><img src="http://www.devdao.com/images/logo.gif" alt="www.devdao.com" /></a> <a href="" style="vertical-align:baseline;">爲什麽我老是對不齊呢?why??</a> </div> </body> </html>   但是我們可以看到,下劃線好像貼的過緊,這個時候我們依然還需要給它加句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>www.devdao.com</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.devdao.com" id="aa" title="www.devdao.com"><img src="http://www.devdao.com/images/logo.gif" alt="www.devdao.com" /></a> <a href="" style="zoom:1; vertical-align:baseline;">爲什麽我老是對不齊呢?why??</a> </div> </body> </html>   如果您碰到其他情況的中英文對不齊的情況,那麽也可以嘗試使用上述兩種方法來解決。當然最保險最有效的莫過于就是直接中英文都統一使用宋體。
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有