V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
rabbbit
V2EX  ›  CSS

小白问题,关于 CSS inline-block 在 chrome 下的显示问题

  •  
  •   rabbbit · 2017-11-03 14:59:27 +08:00 · 2901 次点击
    这是一个创建于 2577 天前的主题,其中的信息可能已经有所发展或是发生改变。
    使用 display: inline-block 布局,chrome 和 firefox| ie 显示不同.
    卡壳了,想不通为啥 chrome 这里不一样?

    chrome 62


    firefox


    ie


    [html 代码]( http://htmlpreview.github.io/?https://github.com/Aaron-Bird/baiduIFE/blob/master/xiaowei_mission_3/index.html)
    1 条回复    2017-11-03 15:21:50 +08:00
    noe132
        1
    noe132  
       2017-11-03 15:21:50 +08:00   ❤️ 1
    你的 #gallery 有 20px 的 padding,还有 1px 的 border,设置 width 成 120px,content 实际的宽度只有 120 - 20*2 - 1*2 = 78,而你的内容有 80px,所以就会出现横向滚动条。

    解决办法:加 2 个 px 的宽度


    放大 8 倍就能发现右边少了 1 个 px

    浏览器差异:那得问浏览器厂商
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   971 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 20:22 · PVG 04:22 · LAX 12:22 · JFK 15:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.