這是一個不太引人注意的問題,在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 style="vertical-align:middle;">
<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="" 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>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 style="vertical-align:middle;">
<a href="" style="vertical-align:baseline;">為什麼我老是對不齊呢? why??</a>
</div>
</body>
</html>
但我們可以看到,底線好像貼的過緊,這個時候我們依然還需要給它加句zoom:1;觸發它的hasLayout來避免過緊貼合! 。
<a href="" style="zoom:1;"vertical-align:baseline;">為什麼我老是對不齊呢?why??</a>
如果您碰到其他情況的中英文對不齊的情況,那麼也可以嘗試用上述兩種方法來解決。