当前位置:  编程技术>WEB前端

网页中英文混排行高不等问题的解决方法

    来源: 互联网  发布时间:2014-10-04

    本文导语:  基本上快被这个问题搞疯了,症状如下 症状描述:在ie下(6或7,8没有试过)当出现中英文混排,都采用默认字体时,并使用 li 列表做float时,会出现如上图的症状,文字排列上下不对齐的情况。影响了布局的美观性,造成上...

基本上快被这个问题搞疯了,症状如下

症状描述:在ie下(6或7,8没有试过)当出现中英文混排,都采用默认字体时,并使用 li 列表做float时,会出现如上图的症状,文字排列上下不对齐的情况。影响了布局的美观性,造成上图情况的原因是中英文的文字基线不同,arial字体的下边缘要比宋体(同为12号)低一个象素,上边缘比宋体矮两个象素,而且英文还有i,y这种上下基线不同的情况。所以当中英文混排对齐时,就会出现明显的高度差异,使排版不均。可见放大图。

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

可以解决文字排列不对齐的情况,但宋体英文字是衬线字体(Times New Roman即是英文中的衬线字),字型紧凑,细节较多,排列在一起很醒目,但在连续成文时,容易造成辨识困绕,看错行的情况。关于衬线字体的优缺点,请见这篇文章。相比之下,表示英文还是使用无衬线字体更美观大方。

解决方法一 “饺子”童鞋的 发现。

英文采用tahoma字体–宋体,arial及 tahoma字体比较–arial与tahoma的无衬线体比较精致

当中英文混排时,使用tahoma字体的情形

中英混排,纯中文组合的行高都一致了,但a在hover状态下下划线与中文粘联在一起。

缺陷:使用tahoma字体时,在ie6及ie6以下版本,会导致所有中文字体链接的下划线会出现与字体粘连现象。淘宝使用的也是这一解决方案。相信大型项目,不同的人来共同完成一个页面的模块时,在统一的规范下,使字体更规范,减少错位,而采用带有下划线会出现与字体粘连的tahoma字体,是值得的

以下是携同大米童鞋 发现的:

英文采用arial字体,中文使用宋体。可在标签内注明 line-height:1.231,可解决行高不等以及字体与下划线粘连问题。(不知道大范围中英文混排适不适用,有待后续校验。)

总结:感谢大米,感谢饺子,感谢YUI,感谢淘宝!


    
 
 

您可能感兴趣的文章:

 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 无法显示网页验证码问题怎么解决
  • php网页标题中文乱码的有效解决方法
  • php网页标题中文乱码如何解决
  • Linux菜瓜求救:我在用KDE打开网页浏览器时出错:无法为:text/html创建视图,如何解决?
  • 求教,我要把网页中applet的默认背景的灰色变成白色,该如何解决?试过多种方法,未果...
  • asp+mysql+utf8 网页出现乱码问题的解决方法
  • 网页验证码无法显示的解决方法
  • 使用C# Winform应用程序获取网页源文件的解决方法
  • 急待解决!如何全屏加载网页?在线等!
  • 网页的编码问题!或者java的编码问题,由此引出一条解决中文问题的思路
  • 请问在linux下怎样通过局域网进入internet浏览网页??高手帮忙!!我到处问没人能解决!
  • 如何解决jsp网页中汉字乱码问题??
  • 解决谷歌搜索技术文章时打不开网页问题的python脚本
  • xhtml+css网页制作中常见问题解决方法
  • oracle em 按钮乱码解决办法及em网页变成英文
  • 在宾馆上网,打开IE输入网址后,弹出一个用户名密码的网页。请问这个功能如何实现?各位帮一下忙,如果可以解决问题,我可以给钱,谢谢了。
  • 求在 Internet上实现网页同步的解决方案
  • 用TOMCAT打不开JSP的网页,如何解决
  • 指定网页的doctype解决CSS Hacking方法总结
  • 网页验证码无法显示解决方法大全
  • web网页自动跳转方法:Html body onload自动跳转举例
  • linux浏览网页时怎样显示网页中的flash动画?
  • Python获取网页编码的方法及示例代码
  • 怎样把整张网页内容当作一副图形(只能作为图像,因为可能网页中有图)传给控制打印的Java程序?
  • HTML网页中的html body onload自动跳转方法介绍及自动跳转代码示例
  • 为什么我用netscape浏览时,网页不正常(主要是动态网页)碰到分类排序的就显示不了了
  • HTML网页的Meta Refresh自动跳转方法介绍及Meta Refresh自动跳转代码示例
  • [求助][排错]一段利用socket连接网页,并将网页内容拷贝下来的程序。。。[有一点问题]
  • 中文网页快速去重算法研究
  • 关于session(我停了一会儿没动网页,再在点击网页链接时,session丢失,然后点击IE的刷新,session又有了)这是怎么回事。
  • VPN虚拟局域网和本地局域网共存(连上vpn后正常打开网页)


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3