css - 在 Chrome 中停止水平滚动的指南

标签 css google-chrome scroll overflow

我意识到之前有人问过这个问题,但通常提供的解决方案涉及将其添加到目标标签中:

overflow-x: hidden

我已经做到了。此修复可防止 Firefox 中的水平滚动,但在涉及 Chrome 和 IE8 时会失败(目前对于 IE8 来说不是什么大问题)。从之前的问题来看,这可能已经成为 Chrome 34 版以来的一个问题。那么我该如何解决这个问题呢?

导致滚动的 CSS 问题如下所示:

// Tablet portrait and landscape
@media (min-width: @screen-sm-min) {
    & {
        margin: 0 -100% !important;
        padding: 30px 100% !important;
    }
}

以上内容使内容按要求均匀地出现在中心。对此有任何建议或可能的资源来解释为什么在 Chrome 中会发生这种情况吗?

谢谢

附言我还注意到这个网站没有那个问题——为什么会这样?结构上的根本区别?还是我正在寻找的 CSS?

最佳答案

感谢大家的努力,尽管我提供的信息很少。我们解决了这个错误,但我们仍然不知道它为什么会发生。对于不同的页面,我们有不同的 .LESS 文件,但它们都被导入到一个名为 ice-styles.less

的文件中

这是我添加了 overflow-x: hidden 并且出于某种原因即使附加了 !important 后缀也被忽略了。我对此的理解是它应该应用于所有页面,因为它被附加到 htmlbody 标签。

所以我们将上面的同一行移动到出现问题的 .LESS 页面中并解决了问题 - 但它没有将问题引入其他页面 - 这表明页面的结构才是真正的罪魁祸首.

再次感谢大家

关于css - 在 Chrome 中停止水平滚动的指南,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27823171/

相关文章:

html - 我怎样才能在我的 table 里做一个滚动?

jquery - 如何以用户始终需要滚动才能看到的方式放置 div?

internet-explorer - 当我使用 cakephp 时,将 PIE.htc 文件放在哪里(用于使 IE 与 CSS3 一起工作)

javascript - jQuery Mobile 无法在 Google Chrome 上运行

jquery - 在 Chrome 中使用非常基本的 jQuery 单击链接时出现 INDEX_SIZE_ERR

javascript - React Hooks - 滚动

html - 如何通过调整现有 CSS 来限制可用性日历的大小?

html - Flexbox 不适用于 iPad 和 Safari

css - 如何获得动态宽度的滚动条?

html - Chrome 和 IE10 中的 CSS 对齐问题