为什么这个网站在webkit上横向滚动？

Question

Website Link

Screen Capture

我在Safari和Chrome上使用最新版本的OSX进行测试。它似乎仅限于web-kit，因为其他人告诉我scroll中没有横向IE。

我尝试使用以下 CSS ：

解决此问题

/* For the "inset" look only */
html {
    overflow: auto;
}

body {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    padding: 30px;
    overflow-y: hidden;
    overflow-x: hidden;
}

body:hover {
    overflow-y: scroll;
}

/* Let's get this party started */
::-webkit-scrollbar {
    width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px; 
} 

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4); 
}

body {
 //   overflow-x: hidden;
   font-family: "Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
    width: 100%;
    margin: 0;

    //position: relative;
//left: 15px;
//-ms-scroll-limit: 0 0 0 0;
//-webkit-overflow-scrolling:touch;
}

除了垂直滚动不再适用于移动触摸设备这一事实外，它的工作原理。可能是因为：

body:hover {
        overflow-y: scroll;
    }

我在这里完全失败了。这个问题的根本原因是什么？

Answer 1

尝试将此添加到您的CSS

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Answer 2

对body标签使用overflow-x属性

body{
    overflow-x: hidden;
}

overflow-x property

或

尝试将<{1}}属性添加到HTML中的立即开始 DIV。

Answer 3

这是因为如下图所示...

您可以通过在使用引导程序时添加class="container"来解决此问题，因此行类应该具有父类容器并且还为其分配width:100%。