zoukankan      html  css  js  c++  java
  • CSS在显示行高不一的问题解决方法

    相信很多朋友在写CSS的时候都会遇到过这样的问题:英文字母和汉字的行高不一样,导致在全汉字、全英文字母以及汉字字母混合时设置好的margin或 padding 属性出现偏差。

    当然这种情况之存在于IE浏览器,Safari、Google Chrome、Firefox、Opera均不存在类似的问题。

    产生的原因:

    1、全汉字的时候:

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

    2、全英文字母的时候:

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

    3、字母汉字混合:

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

    解决办法:

    更改字体:

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

  • 相关阅读:
    [SPOJ-TTM]To the moon
    [BZOJ1901]Zju2112 Dynamic Rankings
    [算法模板]ST表
    [算法模板]树状数组
    [SPOJ-COT]Count on a tree
    [算法模板]倍增求LCA
    【bzoj 3433】{Usaco2014 Jan} Recording the Moolympics(算法效率--贪心)
    【uva 1152】4 Values Whose Sum is Zero(算法效率--中途相遇法+Hash或STL库)
    【uva 658】It's not a Bug, it's a Feature!(图论--Dijkstra或spfa算法+二进制表示+类“隐式图搜索”)
    【uva 10048】Audiophobia(图论--Floyd算法)
  • 原文地址:https://www.cnblogs.com/yuguotianqing/p/3959642.html
Copyright © 2011-2022 走看看