分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » 移动互联 » 学习之路 » CSS中font-size属性值设置过大导致错位问题
  • CSS中font-size属性值设置过大导致错位问题

    CSS中font-size属性值设置过大导致错位问题-BanYuner

    今天没事继续看看自己的站点,随机点击看看需要哪里还需要改进。观察过程中看到了套图分类中上面一个部分空出来了一个小方格,我当时比较奇怪,之前为什么没有问题,之后又出现这样的问题了呢?
    CSS中font-size属性值设置过大导致错位问题-BanYuner

    这里我们暂且不考虑出现这个问题的原因是什么,我们需要了解的就是如何去解决这个问题。出现此问题之后,我通过查看源码以及审查元素等等尝试,并没有解决问题,在修改CSS部分属性的时候,我发现通过修改font-size值可以解决这个问题。当时我将其属性值由20px修改为18px就没有出现错位的情况了,但是18px对于我来说太小了,所以我放弃了这个方法,转而继续百度寻求结果。

    百度之后,我发现,确实是有很多人都在提出此类问题,大致内容都是因为字体大小造成间隙或者错位等等,最后我选择了其中一篇文章的内容进行参考:
    CSS中font-size属性值设置过大导致错位问题-BanYuner

    OK,既然已经找到了参考答案,那么我们就直接实践起来吧。经过实践,添加line-height属性确实是可以解决这个问题,但是当你的值为XXpx的时候,还是无法解决问题,必须为阿拉伯数字,为此我再次百度想了解其中的差别:
    CSS中font-size属性值设置过大导致错位问题-BanYuner

    可能的值中,第二项就是我们比较关注的了。也就是字体的高度乘以你设置的值作为该属性的值,于是我设置了1.5,这个问题就迎刃而解了。

    这次的问题虽然很小,通过了一个简单的属性值解决问题,但是我想说的就是,前端的世界想要学透真的不容易。

    打赏 分享此文

    扫码,支持我

    CSS中font-size属性值设置过大导致错位问题

    支付宝(点击图片切换)

    扫码,支持我

    CSS中font-size属性值设置过大导致错位问题

    微信(点击图片切换)

    扫码,手机看

    CSS中font-size属性值设置过大导致错位问题
    CSS中font-size属性值设置过大导致错位问题
    2 + 9 =
    1. 1楼
      懿古今
      最后评论时间:2017/11/16 22:59
      来自天朝的朋友 谷歌浏览器 Windows 7 广西南宁市 电信
      遇到问题解决办法,这个过程才是独立博客的魅力所在
      懿古今 4周前 (11-16)回复
      • 帅气小琦琦
        最后评论时间:2017/12/12 14:45
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信
        @懿古今 那确实是的,这些都是小问题,大问题还不见得能自己解决
        帅气小琦琦    1小时前回复