html - Chrome 溢出 : scroll CSS issue (phantom margin/padding)

标签 html css google-chrome

所以,我有两个 div,它们分别保存单独的表格(这样顶部可以用作标题,底部可以用作可滚动的内容区域)。

功能上一切正常,但我一直在用头撞 table ,试图解决在 Chrome 中可滚动区域上显示的幻象边框/边距。

这是火狐:

enter image description here

这是 Chrome:

enter image description here

如您所见,Chrome 在可滚动区域的左侧呈现微弱的边距/填充(从“12a”时间标记开始的位置开始。我在测试期间将可滚动区域的背景更改为#ff0000确保它确实不是边框。但这是没有样式更改的样子:

enter image description here

我会向该元素添加一个简单的 margin-left,但日历单元格是通过 javascript 呈现的,单元格宽度等是根据容器的宽度、可查看的天数和其他几个参数计算的。在测试中,这被证明会使表格中单元格的对齐更加靠右。

有没有人遇到过这个?有谁知道在 Chrome 中的可滚动元素上禁用此属性的方法吗?非常感谢任何帮助。

提前致谢!

最佳答案

边框和滚动条是在你的总宽度中计算的。这似乎就是为什么它看起来好像顶部框被推到了左边,而实际上是滚动条中的几个像素将其下方的所有内容偏移到右侧。

尝试偏移滚动条容器

left:-2px;

或者无论宽度是多少。

关于html - Chrome 溢出 : scroll CSS issue (phantom margin/padding),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22979922/

相关文章:

html - 列表项未填充 ul 的宽度

html - 在 <p> 中设置文本边距并排除图像

html - <dl> 的呈现在嵌入 <ol> 时显示为列表

javascript - 我的 JS 文件无法加载到我的 Chrome 网络应用程序中

javascript - 未捕获的类型错误 : Cannot read property -- JQUERY for Stripe API

html - SVG clipPath 没有正确剪裁

javascript - Firefox 将 img 下移一行

android - ionic 应用程序 : Display Google Directions steps

firefox - css3 不会在 w3c valdidator 中验证

javascript - Chrome 浏览器自动向下滚动内容(当没有人要求时)