果不是因為總監審查嚴格，一定要求這個細節解決掉，也許我也不會去深究根源性的解決辦法，再此感謝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>建站教學網</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.jzread.com" id="aa" title="建站教學網"><img src=/uploadfile/2010/0705/20100705105544309.png" style="vertical-align:middle;" alt=" 建站教學網" /></a>
<a href="">為什麼我老是對不齊呢？ why?? </a>
</div>
</body>
</html>
那麼疑惑又來了，是什麼導致了中英文偏差呢？！ 解決辦法又是什麼呢？！ 於是經過我測試發現兩種情況（當然有可能有更多導致的情況。 你們 可以自己去嘗試），當中英文物件的相鄰元素擁有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>建站教學網</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.jzread.com" id="aa" title="建站教學網"><img src=/uploadfile/2010/0705/20100705105544309. png" alt="建站教學網" /></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>建站教學網</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.jzread.com" id="aa" title="建站教學網"><img src=/uploadfile/2010/0705/20100705105544309.png" style="vertical-align:middle;" alt=" 建站教學網" /></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>建站教學網</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.jzread.com" id="aa" title="建站教學網"><img src=/uploadfile/2010/0705/20100705105544309. png" alt="建站教學網" /></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>建站教學網</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.jzread.com" id="aa" title="建站教學網"><img src=/uploadfile/2010/0705/20100705105544309. png" alt="建站教學網" /></a>
<a href="" style="zoom:1; vertical-align:baseline;" >為什麼我老是對不齊呢？ why?? </a>
</div>
</body>
</html>
如果您碰到其他情況的中英文對不齊的情況，那麼也可以嘗試使用上述兩種方法來解決。 當然最保險最有效的莫過於就是直接中英文都統一使用宋體。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
