网页中英文混排行高不等问题的解决方法_经验交流

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

症状描述:在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,感谢淘宝!

时间: 2024-09-28 04:35:57

网页中英文混排行高不等问题的解决方法_经验交流的相关文章

网页设计技巧:网页中英文混排行高问题

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

用CSS解决中英文混合字符串的截取省略问题的解决办法_经验交流

作为一个程序员,经常需要面对的一个问题就是在新闻等信息的标题列表中,常常为了适应表格的宽度,需要对过长的标题文字的进行截取并在截取后的文字末端加上省略号. 众所周知,有很多方法可以实现这个功能,JavaScript,ASP,PHP都有各自的实现方法,但是面临的问题有很多,比如中英文混杂时或在某些编码下,容易造成截取出现乱码的问题,虽然大多数问题已经有比较成熟的解决方案,但在数据量比较大时,使用JavaScript,ASP,PHP实现这一功能,无疑会给客户端或服务器端造成比较大的资源开销. 随着W

网页绿色系配色应用实例图文第1/2页_经验交流

绿色与人类息息相关,是永恒的欣欣向荣是的自然之色,代表了生命与希望,也充满了青春活力,绿色象征着和平与安全.发展与生机.舒适与安宁.松弛与休息,有缓解眼部疲劳的作用. 它本身具有一定的与自然.健康相关的感觉,所以也经常用于与自然.健康相关的站点.绿色还经常用于一些公司的公关站点或教育站点. 绿色能使我们的心情变得格外明朗.黄绿色代表清新.平静.安逸.和平.柔和.春天.青春.升级的心理感受. 下面我们根据绿色系不同属性邻近色.同类色的高纯度低纯度.对比色等色彩搭配做不同的举例分析. 绿色系分析:

做网页中需要掌握的八个CSS布局技巧_经验交流

1.若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题.W3C对于XHTML与CSS 都有检测工具可用,请见 http://validator.w3.org .请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误:我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减. 2.使用浮动功能时记得适当清除指令  浮动是个危险的功能,未必会产生您所期望的结果.如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况,请先确定您的做法是正确的.请参阅Eric 

发现四种在网页中使用CSS样式表的方法_经验交流

如何在网页中插入CSS  前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内部样式表.导入外表样式表和内嵌样式.  1. 链入外部样式表  链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用< link >标记链接到这个样式表文件,这个标记必须放到页面的< head >区内,如下:  复制代码 代码如下: <head>   --  

xhtml+css网页制作中常见问题解决方法_经验交流

无论是谁,在制作页面的过程都是会碰到这样或者那样的问题,出了问题就肯定要解决.解决问题的前提是要知道问题出在什么地方,对于新手来说不一定一看到问题就知道问题出在哪里.比如在IE6中"多了一只猪"的问题,对于一些问题需要更多的经验交流分享吸收后才能更好的成长. 在网络中我想大家都有提过问题,需要别人解答的时候,但往往是你的一个问题却得不到任何人给你的解答,或者说是完全被无视了.对于这个时候的你,是不是在想"难道是因为我这个问题太简单了,他们都不想回答""他们

网页中关闭IE的图像工具栏和XP主题_经验交流

关闭XP系统主题在IE中的显示 如果开发环境是XP系统,IE中的input标签会和XP系统主题相符合,影响了外观的统一,采用下列方法可以关闭. 添加下列 META 标记,可以选择使得您的 HTML 内容对于某些元素(如按钮和滚动条)不采用与该操作系统相同的外观: <META HTTP-EQUIV="MSThemeCompatible" Content="No"> 关闭IE的图像工具栏 IE的图像工具栏有时候很讨厌,在MSDN上无意中发现了关闭方法 图像工

做网页字体大小参考 网页中同字号字体的不同单位对比列表_经验交流

对于WEB前端页面开发,字体大小的设置是比较重要,这里找到了一些关于字号大小的数据,共享出来备以后参考,也希望能对大家有用! Points   Pixels       Ems            Percent 6pt        8px          0.5em        50% 7pt        9px          0.55em      55% 7.5pt     10px        0.625em    62.5% 8pt        11px      

DIV CSS网页布局 最小高度(min-height)的妙用_经验交流

假定有二个BOX,我们需要它的最小高度为150PX. CSS div.box1,div.box2{ width: 300px; min-height: 150px; background: #EEE; float: left; margin-right: 20px; } xhtml <div>IE中没保持最小高度为150px</div> <div>最小高度可以设定一个BOX的最小高度, 当其内容较少时时,也能保持BOX的高度为一定</div> 现在的效果,I