找软件用软件,就到华军软件园! 软件发布
所在位置: 首页 — 教程攻略 — 教程 — 电脑软件教程  —  CSS问题集...

CSS问题集锦:中英文字母和汉字行高不同

作者:辛苦的哈哈 日期:2017-07-23

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

 

css
css

  产生的原因:

  全汉字的时候:

  一般情况在选中文本可以看出汉字是上对齐的(具体表现是选中字体,从背景上看上去下面多了一部分,用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”,这可能会损失一些效果,没办法如果谁有更好的解决办法可以指教一下。

相关文章

最新教程 更多

鲁大师怎么开启自动降温功能-鲁大师开启自动降温功能的方法 鲁大师怎么开启自动降温功能-鲁大师开启自动降温功能的方法

怎么使用鲁大师查看电脑配置?-使用鲁大师查看电脑配置教程 怎么使用鲁大师查看电脑配置?-使用鲁大师查看电脑配置教程

potplayer怎么设置多重处理方式?-potplayer设置多重处理方式的方法 potplayer怎么设置多重处理方式?-potplayer设置多重处理方式的方法

potplayer怎么设置时间跨度?-potplayer设置时间跨度的方法 potplayer怎么设置时间跨度?-potplayer设置时间跨度的方法

potplayer怎么设置播放时画面的尺寸?-potplayer设置播放时画面尺寸的方法 potplayer怎么设置播放时画面的尺寸?-potplayer设置播放时画面尺寸的方法

热门教程 更多

电脑重装系统后没声音怎么办-驱动精灵教程 电脑重装系统后没声音怎么办-驱动精灵教程

谷歌浏览器怎么清除缓存-谷歌浏览器清除缓存的方法 谷歌浏览器怎么清除缓存-谷歌浏览器清除缓存的方法

金山打字通怎么练打字-金山打字通练习打字方法 金山打字通怎么练打字-金山打字通练习打字方法

bootcamp驱动如何升级?bootcamp驱动升级方法 bootcamp驱动如何升级?bootcamp驱动升级方法

qq音乐皮肤怎么换?-qq音乐换皮肤方法 qq音乐皮肤怎么换?-qq音乐换皮肤方法