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

[rabbbit]

使用 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)

[noe132]

你的 #gallery 有 20px 的 padding，还有 1px 的 border，设置 width 成 120px，content 实际的宽度只有 120 - 20*2 - 1*2 = 78，而你的内容有 80px，所以就会出现横向滚动条。

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


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

浏览器差异：那得问浏览器厂商