V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
QuDump
V2EX  ›  前端开发

前端小白请教一个 table 行高的问题

  •  
  •   QuDump · 2017-12-19 23:18:15 +08:00 · 2623 次点击
    这是一个创建于 2567 天前的主题,其中的信息可能已经有所发展或是发生改变。

    代码如下,用 vue 写的

    https://gist.github.com/QuDump/61dea44d743f2d3ec7c8dcbd5dca38ad

    我只照着 V2EX 的 css 设置的,但是无论怎么调整,img 的高度总是比设置的高度大 4px。折腾了一个晚上了,都没有弄明白原因。 有没有大神能指导一下

    10 条回复    2017-12-20 15:03:31 +08:00
    ferrum
        1
    ferrum  
       2017-12-19 23:29:12 +08:00 via iPhone
    没看代码,但我猜说因为元素固定的行高导致的。试试把 img 的父元素行高设置为零。
    ferrum
        2
    ferrum  
       2017-12-19 23:29:51 +08:00 via iPhone
    不是,是 img 的行高。
    QuDump
        3
    QuDump  
    OP
       2017-12-19 23:33:58 +08:00
    @ferrum 父元素就是 td , 没有设置高度
    QuDump
        4
    QuDump  
    OP
       2017-12-19 23:39:43 +08:00
    @ferrum 不好意思,描述有点问题。img 的父元素是 td, 假设 img 的高度设为 48px,td 的高度就变成了 52px,F12 查看是 img 顶端对齐了,下面多出来 4 像素
    macroideal
        5
    macroideal  
       2017-12-19 23:48:27 +08:00 via iPhone   ❤️ 1
    没看代码,是不是 box-size 的问题??
    ferrum
        6
    ferrum  
       2017-12-20 00:00:16 +08:00   ❤️ 1
    @QuDump 你这代码我都不好测试啊。试试在 Dev Tools 里把 img 外面的 a 的行高设置为 0,或者 img 的设置为 0。

    我以前也遇过类似问题,解决方案就是上面的。

    参考: https://www.zhihu.com/question/21558138
    zybzzc
        7
    zybzzc  
       2017-12-20 00:55:48 +08:00 via Android   ❤️ 1
    父元素 font-size 设为 0,我猜的
    POPOEVER
        8
    POPOEVER  
       2017-12-20 01:26:23 +08:00   ❤️ 1
    试试 img { display: inherit;}
    POPOEVER
        9
    POPOEVER  
       2017-12-20 01:32:40 +08:00
    是因为 img 默认是 inline-block,inline-block 就是会有这个间隙问题,通常就是 7 楼说的设置 font-size: 0; 我是前阵子做一个布局的时候偶然发现可以用 display: inherit; 来解决的,不过不保证你能用哦
    QuDump
        10
    QuDump  
    OP
       2017-12-20 15:03:31 +08:00
    @macroideal
    @ferrum
    @POPOEVER 确实如 7 楼所言,font-size 设为 0 就正常了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2312 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 15:57 · PVG 23:57 · LAX 07:57 · JFK 10:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.