Question

我之前已经意识到这个问题，但通常提供的解决方案包括将其添加到目标标记：

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中发生这种情况？

由于

P.S。我也注意到这个网站没有这个问题 - 为什么会这样？结构的根本区别？或者我正在寻找的CSS？

Answer 1

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

的文件中

以下是我添加了overflow-x: hidden，由于某种原因，即使附加了！important 后缀，也会被忽略。我对此的理解是它应该适用于所有页面，因为它被附加到 html 和 body 标记。

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

再次感谢大家

Answer 2

你试过用jquery设计它吗？

$(document).ready(function(){
$('body').css('overflow-x','hidden !important');
})

or even if it didnt worked trying it after few seconds
$(document).ready(function(){
setTimeOut(function(){
$('body').css('overflow-x','hidden !important');
},1000)
})

Answer 3

有些东西会覆盖你的溢出：隐藏标签...... 也许有一些css给你的元素一些宽度，然后你强制溢出，这在chrome或IE中有时不会发生......

Answer 4

html {
    overflow-x: hidden; //or none
}

停止Chrome中水平滚动的指南

4 个答案: