网页中英文混排行高不等问题
作者:布林 来源:口碑网UED Team 发布时间:2008-08-26 17:03:00
基本上快被这个问题搞疯了,症状如下
症状描述:在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字体,中文使用宋体。可在<a>标签内注明 line-height:1.231,可解决行高不等以及字体与下划线粘连问题。(不知道大范围中英文混排适不适用,有待后续校验。)
总结:感谢大米,感谢饺子,感谢YUI,感谢淘宝!
猜你喜欢
- 函数名称:ReplaceHTML参数:@Textstr作用:去掉 @Textstr 内的HTML代码备注:需要给数据库访问者master.s
- 查看表空间的名称及大小代码如下:SQL>select t.tablespace_name, round(sum(bytes/(1024
- 如何使用Index Server建立一个网站导航地图?程序代码如下:<html><head><title>asp教程之网站导航 -
- strIn 为 输入的Email地址字符串变量 返回为true或falsereturn Regex.IsMatch(strIn, @&quo
- 先给一个例子:假设在一个表单中有一个按钮id="save"$(document).ready(function(){&n
- 如果服务器出现Raid故障,在数据基本恢复成功后,发现其中的一个Sql Server日志文件(扩展名LDF)损坏严重,我们可以通过下面的操作
- 关于书写习惯,遵循曾经总结过的风格标准,现在一点都没有变。并且近来翻看高手作品,横向连排似乎在大产品项目中逐渐成为主流,个人认为如此维护效率
- 前两天在帮朋友整理他的主页空间时候,发现的一点关于MySQL可能大家都会忽略的问题:我们知道,在安装完MySQL后,它会自动创建一个root
- 优雅的设计经常包含一些特殊的字体,而这些字体并不存在于用户的字体库中,我们并不能奢求每一个访客都是设计师。 :-)虽然CSS3标
- 现在的互联网上已经有很多能帮助设计师们的各种在线生成器,比如:图标(icon)生成器、背景生成器、按钮生成器和标志生成器等。Balkhis曾
- “看图购”beta版今日起正式在淘宝网上线了,域名是:http://go.taobao.com。从此您也可以像翻看杂志一样翻看女装的图片了,
- 如何用表单的方式推送请求的信息?具体见下:<html><head><title>答复用户信息
- 本文是关于人物角色的一些简单介绍,感谢瑶芝同学提供的大力帮助! 人物角色(Personas)作为一种技术
- 从文本文件中调出记录出现丢失换行?解决方法:<%Dim fsDim tsset fs=Server.Cr
- 是因工作需要做的一个批量修改代码的小东西,拿出来与大家分享。 目前可以处理的文件类型:.asp .inc .htm .html
- 所以对应的asp处理代码如下代码如下:dedearr=split(xiangguanid2,chr(13)) '分割成数组
- html5带给我们的不仅仅是更多语义丰富的标签,还有更多更牛逼的特性,比如“离线存储”。 对于台式电脑来说,或者它并没有带来什么惊喜,但是对
- Wordpress 2.6.2 出来了,今天将网站程序从2.6升级上来,比较了一下2个版本的代码,发现2.6的版本中的代码还有几个地方出现了
- 阅读作者上一篇文章:段正淳的css笔记(4)css代码的简写CSS未知图片垂直居中的方法:一天大家在团队中讨论“未知图片垂直居中”的问题,突
- 在分析sIFR之前,先来快速的了解一下sIFR是什么,以及它是如何工作的。sIFR表示scalable Inman Flash Replac