css中英文字母和汉字行高不同解决方法
来源:互联网 发布:淘宝下载到桌面 编辑:程序博客网 时间:2024/06/05 03:47
最近在写一个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。
解决办法:
更改字体:
本来想使用line-height固定的,但是line-height是每一行的基线与基线之间的距离,又因为汉字的基线和英文字母是不同的,所以起不到作用,再说如果是用作导航菜单只有一行还是没有用的。
这样只有从字体上下手了,还真有一种字体可以解决这个问题,这个字体就是“simsun”,“simsun”就是传说已久的“宋体”,在windows字体文件夹下“宋体”的文件名就是“simsun”,他的兄弟“simhei”就是通常说的“黑体”。
所以,解决办法就是 把font-family设置成“simsun”,这可能会损失一些效果,没办法如果谁有更好的解决办法可以指教一下。
- css中英文字母和汉字行高不同的解决方法
- css中英文字母和汉字行高不同解决方法
- css设置字间距和字母间距、中文汉字间距
- 不同编码格式下汉字和字母所占字节数
- 只能输入汉字 和 字母
- js判断是否包含汉字和字母
- 区分字符串中得字母和汉字
- 字母和汉字 所占的字节
- 只能输入数字,字母,汉字和下划线
- C++程序辨别数字、字母和汉字
- 区分string中的字母和汉字
- 统计字符串中英文字母、汉字、空格、数字及其他字符出现的字数
- 截取字符串,含有汉字和字母,不能截半个汉字
- 数学符号和西文字母的中英文发音
- 中英文123456789数字和字母之间的相互转换
- 常用的正则表达式-匹配中英文、字母和数字
- 史上最全的正则表达式-匹配中英文、字母和数字
- c++实现文本中英文单词和汉字字符的统计
- ubuntu14.04不能上网“没有可用的网络设备”
- 读写锁ReadWriteLock
- 一种高效无锁内存队列的实现
- PL/SQL 游标
- mybatis 查询参数为list、数组、map的情况
- css中英文字母和汉字行高不同解决方法
- SVN与GIT的区别
- Continuation 异步化机制
- 二叉树的结构分析及实现
- lxml Element类相关的介绍
- Java NIO原理图文分析及代码实现
- Spring对hibernate配置文件hibernate.cfg.xml的集成,来取代hibernate.cfg.xml的配置
- mac下忘记root密码
- Js之遇到的BUG