成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

導(dǎo)航首頁 ? 技術(shù)教程 ? 網(wǎng)頁中英文混排行高不等問題的解決方法
全站頭部文字 我要出現(xiàn)在這里
網(wǎng)頁中英文混排行高不等問題的解決方法 722 2024-04-03   

基本上快被這個問題搞瘋了,癥狀如下

查看圖片

癥狀描述:在ie下(6或7,8沒有試過)當(dāng)出現(xiàn)中英文混排,都采用默認字體時,并使用 li 列表做float時,會出現(xiàn)如上圖的癥狀,文字排列上下不對齊的情況。影響了布局的美觀性,造成上圖情況的原因是中英文的文字基線不同,arial字體的下邊緣要比宋體(同為12號)低一個象素,上邊緣比宋體矮兩個象素,而且英文還有i,y這種上下基線不同的情況。所以當(dāng)中英文混排對齊時,就會出現(xiàn)明顯的高度差異,使排版不均。可見放大圖。

查看圖片

采用中英文字均使用宋體的方案

查看圖片

可以解決文字排列不對齊的情況,但宋體英文字是襯線字體(Times New Roman即是英文中的襯線字),字型緊湊,細節(jié)較多,排列在一起很醒目,但在連續(xù)成文時,容易造成辨識困繞,看錯行的情況。關(guān)于襯線字體的優(yōu)缺點,請見這篇文章。相比之下,表示英文還是使用無襯線字體更美觀大方。

解決方法一 “餃子”童鞋的 發(fā)現(xiàn)。

英文采用tahoma字體?宋體,arial及 tahoma字體比較?arial與tahoma的無襯線體比較精致

查看圖片

當(dāng)中英文混排時,使用tahoma字體的情形

查看圖片

中英混排,純中文組合的行高都一致了,但a在hover狀態(tài)下下劃線與中文粘聯(lián)在一起。

缺陷:使用tahoma字體時,在ie6及ie6以下版本,會導(dǎo)致所有中文字體鏈接的下劃線會出現(xiàn)與字體粘連現(xiàn)象。淘寶使用的也是這一解決方案。相信大型項目,不同的人來共同完成一個頁面的模塊時,在統(tǒng)一的規(guī)范下,使字體更規(guī)范,減少錯位,而采用帶有下劃線會出現(xiàn)與字體粘連的tahoma字體,是值得的

以下是攜同大米童鞋 發(fā)現(xiàn)的

英文采用arial字體,中文使用宋體。可在<a>標(biāo)簽內(nèi)注明 line-height:1.231,可解決行高不等以及字體與下劃線粘連問題。(不知道大范圍中英文混排適不適用,有待后續(xù)校驗。)

查看圖片

總結(jié):感謝大米,感謝餃子,感謝YUI,感謝淘寶!



主站蜘蛛池模板: 三年级下册语文第五单元作文奇妙的想象 | 安洁拉芽衣| 霹霹乐翻天| 剑与花| 电子天平检定规程| 可可托海的牧羊人原唱歌曲| 儿媳妇电视剧免费| 浪人街| 王岗个人简历| 免费完整队列训练教案| 护航 电影| 就爱小姐姐| 玫瑰故事演员表名单| 荒野求生无马赛原版在哪里看| 八年级上册英语课文| 大石桥联盟| 女孩们电影| 查理和劳拉| 荒岛大逃亡电影| 安全管理论文| 电影五十度黑| 稻森泉| 唐砖演员表| 光棍电影| 又见阿郎电视剧免费观看| 六扇门电影大全| n开头的字| 木偶人| av电影网| 挖掘机动画片全集免费观看| 夫妻情感生活| s0hu搜狐| 动漫秀场| 电影痴人之爱| 抖音手机版| 在线观看乒乓球直播| 二年级aab词语| 李柯以写真照片| 战上海老电影战争片子| 远方的故乡简谱| 送老师锦旗写什么最好|

!!!站長長期在線接!!!

網(wǎng)站、小程序:定制開發(fā)/二次開發(fā)/仿制開發(fā)等

各種疑難雜癥解決/定制接口/定制采集等

站長微信:lxwl520520

站長QQ:1737366103