|
如果不是因為總監(jiān)審查嚴(yán)格，一定要求這個細(xì)節(jié)解決掉，也許我也不會去深究根源性的解決辦法，再此感謝MTIME負(fù)責(zé)而嚴(yán)格的同事。
首先描述一下問題：
如果所示，在IE下當(dāng)一行文字同時有英文跟中文的時候，鏈接下劃線就會發(fā)生折行，也就表示這個時候中英文是沒有對齊的！（FIREFOX不受此問題影響）
但是經(jīng)過測試，默認(rèn)的直接在頁面里設(shè)置鏈接的時候是不會出現(xiàn)這個情況的！
代碼拷貝框
[Ctrl+A 全部選擇 然后拷貝]
查看效果
那么疑惑又來了，是什么導(dǎo)致了中英文偏差呢？！解決辦法又是什么呢？！于是經(jīng)過我測試發(fā)現(xiàn)兩種情況（當(dāng)然有可能有更多導(dǎo)致的情況。你們可以自己去嘗試），當(dāng)中英文對象的相鄰元素?fù)碛衯ertical-align屬性設(shè)置（比如前面一張小圖片，或者文本框，我們需要把他們垂直對齊，一般都會給圖片，文本框（其他任意內(nèi)聯(lián)塊元素）設(shè)置vertical-align:middle;來實現(xiàn)）的時候，那么就會影響到中英文的不對齊。
還有一種情況就是父元素（表格除外）擁有vertical-align屬性設(shè)置的時候，里面的子元素中英文也會對不齊。
代碼拷貝框
[Ctrl+A 全部選擇 然后拷貝]
查看效果
怎么解決這個問題呢？！
先說第一種，就是臨近元素的vertical-middle導(dǎo)致的無法對齊的偏差問題解決方案：
給中英文對象加一個zoom:1觸發(fā)它的haslayout,通過研究發(fā)現(xiàn)一旦它有了haslayout之后，中英文就不會對不齊。
代碼拷貝框
[Ctrl+A 全部選擇 然后拷貝]
查看效果
第二種情況就是父元素的vertical-middle導(dǎo)致的無法對齊的偏差問題解決方案：
給中英文對象加句vertical-align:baseline就可以解決！
代碼拷貝框
[Ctrl+A 全部選擇 然后拷貝]
查看效果
但是我們可以看到，下劃線好像貼的過緊，這個時候我們依然還需要給它加句zoom:1;觸發(fā)它的hasLayout來避免過緊貼合！。
代碼拷貝框
[Ctrl+A 全部選擇 然后拷貝]
查看效果
如果您碰到其他情況的中英文對不齊的情況，那么也可以嘗試使用上述兩種方法來解決。當(dāng)然最保險最有效的莫過于就是直接中英文都統(tǒng)一使用宋體。
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2878142-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2008/6085.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
