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

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

症状描述：在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，感谢淘宝！

赞 (0)

相关推荐

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

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

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

  • java应用cpu占用过高问题分析及解决方法

    使用jstack分析java程序cpu占用率过高的问题 1,使用jps查找出java进程的pid,如3707 2,使用top -p 14292 -H观察该进程中所有线程的CPU占用. [root@cp01-game-dudai-0100.cp01.baidu.com ~]# top -p 14292 -H top - 22:14:13 up 33 days, 7:29, 4 users, load average: 25.68, 32.11, 33.76 Tasks: 113 total, 2

  • Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法

    项目地址:https://github.com/PythonerKK/django-generate-pdf/tree/master 这个demo实现了通过用户输入自己的个人信息生成一份简历pdf,来阐述如何使用Django的HttpResponse生成PDF的文档. 先上效果图: 安装依赖库 首先安装Django最新版2.2.2和PDF依赖包xhtml2pdf pip install django pip install xhtml2pdf 编写表单验证 为了简单起见,这个demo依赖数据库,

  • Redis高并发问题的解决方法

    本文讲述了Redis高并发问题的解决办法.分享给大家供大家参考,具体如下: redis为什么会有高并发问题 redis的出身决定 redis是一种单线程机制的nosql数据库,基于key-value,数据可持久化落盘.由于单线程所以redis本身并没有锁的概念,多个客户端连接并不存在竞争关系,但是利用jedis等客户端对redis进行并发访问时会出现问题.发生连接超时.数据转换错误.阻塞.客户端关闭连接等问题,这些问题均是由于客户端连接混乱造成. 同时,单线程的天性决定,高并发对同一个键的操作会

  • php-fpm 占用CPU过高，100%的解决方法

    php-fpm 占用CPU过高，100%的解决方法

    话说最近配置的LNMP还算稳定,正在暗自窃喜,但是从昨晚开始,就发现服务器的CPU占用过高,甚至到了100%.我的内存是1G的,正常情况下占用率应该在5%以下,最多不超10%. 阿里云最近的监控显示: 使用top命令查看,发现 php-fpm 占用内存过高,非常不正常: 我按照<Nginx使用的php-fpm的两种进程管理方式及优化>这篇文章,配置 php-fpm 进程数如下: 重启 php-fpm 后,还是没有彻底解决问题,依旧会出现占用 99以上,不知道哪位朋友知道如何分析和解决呢?小弟求

  • mysqlreport显示Com_中change_db占用比例高的问题的解决方法

    首先说明一点,每天的访问量并不大每天才2W的访问量,按道理说,访问量再增加一倍这样的服务器也应该足以承受.可是我们的服务器为什么总是这样频频重启呢?经过mysqlreport显示mysql运行的状态如下:MySQL 5.1.28-rc-log uptime 0 0:4:48 Thu Apr 30 14:04:58 2009 __ Key _________________________________________________________________Buffer used 7.7

  • Jquery网页出现的乱码问题的三种解决方法

    1.当导入Jquery代码时:网页中其它文字正常,而Jquery代码显示异常.解决方案: 将Jquery代码用文本(.txt)或word打开,再另存为并改变其编码方式(通常改为utf-8或gb2312). 2.当要改ASP.NET中整个网站的编码问题时.在web.config文件中修改< globalization requestEncoding="gb2312" responseEncoding="gb2312"culture="zh-CN&quo

  • 安装SQL Server 2016出错提示：需要安装oracle JRE7 更新 51(64位)或更高版本问题的解决方法

    错误提示原因:安装时检测出电脑没有安装JDK,而且是版本7(其他版本不行) 解决方法:先进下面这个网站安装JDK,安装好后配置环境变量,然后重新安装SQL Server 2016即可 http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downloads-javase7-521261.html 先勾选接受协议,然后开始下载 我的电脑系统是Windows x64,所以下载的是红线框起来的,具体下载哪个看自己的电脑

  • php strlen mb_strlen计算中英文混排字符串长度

    比较strlen和mb_strlen 当字符全是英文字符的时候,两者是一样.这里主要比较一下,中英文混排的时候,两个计算结果.(测试时编码方式是UTF8) 复制代码 代码如下: <?php $str='中文a字1符'; echo strlen($str); echo '<br />'; echo mb_strlen($str,'UTF8'); //输出结果 //14 //6 ?> 结果分析:在strlen计算时,对待一个UTF8的中文字符是3个长度,所以"中文a字1符&q

  • 获取JS中网页各种高宽与位置的方法总结

    获取JS中网页各种高宽与位置的方法总结

    screen对象 获取屏幕的高宽(分辨率) screen.width //屏幕的宽 screen.height //屏幕的高 screen.availWidth //屏幕可用宽度 屏幕的像素高度减去系统部件高度之后的值 screen.availHeight //屏幕可用高度 屏幕的像素宽度减去系统部件宽度之后的值 window对象 获得窗口位置及大小 window.screenTop //窗口顶部距屏幕顶部的距离 window.screenLeft //窗口左侧距屏幕左侧的距离 window.i

随机推荐