css中英文字母和汉字行高不同怎么办

文章简介:css中英文字母和汉字行高不一样的解决办法。

最近在写一个css的时候遇到一个问题:英文字母和汉字的行高不一样,导致在全汉字、全英文字母以及汉字字母混合时设置好的margin或padding 属性出现偏差…当然这种情况之存在于IE浏览器,Safari、Google Chrome、Firefox、Opera均不存在类似的问题

产生的原因:

全汉字的时候:

一般情况在选中文本可以看出汉字是上对齐的(具体表现是选中字体,从背景上看上去下面多了一部分,用css术语讲就是产生了padding-bottom属性,为了说明问题暂且就说存在padding属性吧)。

全英文字母的时候:

类似于全汉字在全英文的情况下是下对齐,会出现类似padding-top的属性。不管是全汉字还是全英文这时候的行高是一样的。

字母汉字混合:

但是如果把汉字和英文字母混合在一起的时候就可以看出来差别了,这时候再选中所有字体就可以看出来这时候是的补白是 padding=padding-top+padding-bottom,也就是会多出来一个padding-top(也可以说是padding- bottom),一般字体在12px的情况下,多出来的部分大概是2px。

解决办法:

  1. 更改字体:

    本来想使用line-height固定的,但是line-height是每一行的基线与基线之间的距离,又因为汉字的基线和英文字母是不同的,所以起不到作用,再说如果是用作导航菜单只有一行还是没有用的。
    这样只有从字体上下手了,还真有一种字体可以解决这个问题,这个字体就是“simsun”,“simsun”就是传说已久的“宋体”,在windows字体文件夹下“宋体”的文件名就是“simsun”,他的兄弟“simhei”就是通常说的“黑体”。
    所以,解决办法就是 把font-family设置成“simsun”,这可能会损失一些效果,没办法如果谁有更好的解决办法可以指教一下。

时间: 2024-09-17 04:38:55

css中英文字母和汉字行高不同怎么办的相关文章

css中英文字母和汉字行高不同解决方法

最近在写一个css的时候遇到一个问题:英文字母和汉字的行高不一样,导致在全汉字.全英文字母以及汉字字母混合时设置好的margin或padding 属性出现偏差-当然这种情况之存在于IE浏览器,Safari.Google Chrome.Firefox.Opera均不存在类似的问题 产生的原因: 全汉字的时候: 一般情况在选中文本可以看出汉字是上对齐的(具体表现是选中字体,从背景上看上去下面多了一部分,用css术语讲就是产生了padding-bottom属性,为了说明问题暂且就说存在padding属

CSS line-height行高上下居中垂直居中样式属性

常常使用line-height设置内容(图片.文字)行高上下居中样式效果. 一.line-height行高语法   复制代码 代码如下: line-height:22px .jb51div{line-height:22px} line-height:200% .jb51div{line-height:200%} line-height:+数字+单位(在CSS布局中我们一般采用像素px为单位) 行高line-height的值可以为百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值.其百

CSS网页制作教程:表单button的行高

文章简介:表单button的行高问题. HTML Code <input type="submit" id="button" value="engage"/> CSS Code #button {      border: 2px solid #06f;      color: #06f;      background-color: #6cf;      font: bold 12px Arial, Helvetica, sans-

CSS定义字体间距 字体行与行间距

CSS定义字体行间距 line-height:xxpx; CSS定义字体间距 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 属性     属性含义     属性值Word-spacing     定义了各个单词之间的间距     Normal<length>必须以长度为单位Letter-spacing        定义了每个字母之间的间距     同上Text-decoration     定义文字的"装饰"样式     None|underlin

word小技巧:去除中英文字母下的波浪线

  word,作为大家最常使用的办公软件,好好掌握它的一些小技巧,不管是学习还是工作,都是有益无害的.为了让熟悉下word比较冷门的一个技巧,今天图文共享下word中英文字母下面的波浪线取消方法,还没了解的赶紧看下. word中英文字母下面的波浪线取消方法: 这里首先请朋友把自己的word打开,这样可以更加直观的理解一下为什么会这个波浪线; 打开word 这里先举个例子为朋友你说明一下,这里的没有加上波浪线的有的是正确的英语单词,但是有的就是非正确的英语单词了; 非正确的英语单词 这里点击一下这

Excel怎么自动调整单元格行高和列宽

  Excel怎么自动调整单元格行高和列宽         方法一 1.用Excel2010打开一篇工作表,选中我们需要调整列宽的单元格,切换到"开始"选项卡,选择"单元格"组中"格式"下的"自动调整列宽"选项. 2.返回工作表,我们就能看到之前选中单元格的列宽已经自动进行了调整,效果如下: 方法二 用Excel2010打开一篇工作表,选中我们需要调整列宽的单元格,将鼠标移到这一列的右上角,当指针变成如下状态的时候,双击鼠标.

Excel2007基础教程:改变列宽和行高

Excel2007基础教程:改变列宽和行高 经常需要改变列宽和行高.例如,可以将列变窄以在打印页中容纳更多信息.或者您可能想增加行的高度来创建一个"双倍空间"的效果. Excel 提供了几种改变列宽和行高的方法.1 .改变列宽 列宽是根据在单元格中填充的"固定间距字体" 字符的数量来测量的.默认状态下,列宽为8 .43 个单位,相当于64 像素. 提示:如果一个含有数值的单元格中全是井号(刑, 这就表示列宽不足以容纳单元格中的信息. 加大列宽可以解决这个问题. 在改

ppt中英文字母下的红色波浪线怎么取消?

ppt中英文字母下的红色波浪线怎么取消?   1.我用的是office07版的,我输入的是"foad",它就会有红色的波浪线,提示有拼写的错误~~(话说这不是福特么~~) 2.点击工具栏中的"审阅". 3.然后点击"拼写检查". 4.在出现的拼写检查对话框中选择"忽略"~就会提示拼写检查结束~OK了. 5.没有红色波浪线了~ wps教程 word教程 Excel教程 PowerPoint教程

如何在wps表格中统一调整行高

  在wps表格中统一调整行高的方法: ①选中要调整行高的所有单元格,如图;然后依次点击快速工具栏的"行和高"-"行高"; ②然后在弹出的行高输入框,我们自由输入行高大小即可,如下图;点击确定,然后刚才选中的所有单元格的行高就统一调整了