网页中英文混排行高不等问题
作者：布林 来源：口碑网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，感谢淘宝！
0
投稿猜你喜欢
import Exception# except 在捕获错误异常的时候 是要根据具体的错误类型来捕获的# 用一个块 可以捕获多个不同类型的异- 测试环境：windows Server 2003 R2一、开始菜单启动项实现用户必须登录才可执行。测试脚本（python代码）：import
- 本文实例讲述了Python with语句上下文管理器。分享给大家供大家参考，具体如下：在编程中会经常碰到这种情况：有一个特殊的语句块，在执行
- 一、下载MySQL数据库并进行安装和配置下载地址：https://dev.mysql.com/downloads/installer/二、下
- 本文实例讲述了python生成IP段的方法。分享给大家供大家参考。具体实现方法如下：#!/usr/local/bin/python#-*-
- 在使用JavaScriptSerializer.Serialize 方法转json对象时，遇到一个问题，后台方法生成的json字符串中有没有
- 早就想用一个系列的文章来写AJAX,让自己头到尾理一遍,更好的掌握基础知识(昨天的面试受打击了,基础知识很重要).要是写的好,也许也可以帮助
- USE NBDXMIS CREATE proc TestTimeAnySentence @sql_where varchar(8000) a
- Python则是通过缩进来识别代码块的。缩进Python最具特色的是用缩进来标明成块的代码。我下面以if选择结构来举例。if后面跟随条件，如
- 一.安装mysql 运行以下命令更新YUM源。rpm -Uvh http://dev.mysql.com/get/mysql57
- 滑动验证距离分别获取验证码背景图和滑块图两张照片，然后利用opencv库，通过高斯模糊和Canny算法进行处理，然后通过matchTempl
- 学习目的 掌握如何用ADO.NET插入新的记录 我们学得好快，今天做一个简易的新闻发布网页，可以说是个演示型的，只是让大家能理插入数据的最主
- linux平台及windows平台mysql重启方 * inux下重启MySQL的正确方法：1、通过rpm包安装的MySQLservice m
- 通过对四则运算的学习，已经初步接触了Python中内容，如果看官是零基础的学习者，可能有点迷惑了。难道在IDE里面敲几个命令，然后看到结果，
- 在Python中，经常会去读csv文件，如下import pandas as pdimport numpy as npdf = pd.rea
- 1.offsetTop :当前对象到其上级层顶部的距离.不能对其进行赋值.设置对象到页面顶部
- 一、变量声明变量go定义变量的方式和c,c++,java语法不一样，如下：var 变量名 类型, 比如 : var a intvar在前，变
- 大家在使用PyCharm的过程中，肯定会遇到各种各样的问题，其中一个问题就是很多第三方的包安装不了。在使用过程中，我对这种情况进行了总结，现
- 一、前言关于什么是Dapper（详细入口），在此不做赘述；本文仅对Dapper在.Net Core中的使用作扼要说明，所陈代码以示例讲解为主
- 本文介绍了python OpenCV学习笔记之直方图均衡化，分享给大家，具体如下：官方文档 – https://docs.opencv.or
