html - 溢出-x :hidden still can scroll

Question

问题是:

我有一个全宽条形菜单，它是通过在右侧和左侧创建一个大边距来制作的。此边距应由 overflow-x: hidden 裁剪，它是……没有滚动条，一切(视觉上)都正常……

但是，如果您拖动页面(使用 Mac Lion)或向右滚动，页面会显示一个巨大的栏，这应该被 overflow-x:hidden 裁剪掉了。 .

CSS

html {
  margin:0;
  padding:0;
  overflow-x:hidden;
}
body {
  margin: 0 auto;
  width: 950px;
}

.full, .f_right {
  margin-right: -3000px !important;
  padding-right: 3000px !important;
}

.full, .f_left {
  margin-left: -3000px !important;
  padding-left: 3000px !important;
}

这是一个链接:http://jsfiddle.net/NicosKaralis/PcLed/1/

您必须在草稿中打开才能看到...jsfiddle css 以某种方式使其工作。

@Krazer

我有这样的结构:

body
  div#container
    div#menu_bar
      div#links
      div#full_bar
    div#content_body
    ...

#container 是一个居中的 div，宽度固定为 950px，#full_bar 是一个在整个窗口上从一侧延伸到另一侧的栏

如果我在#full_bar 中将宽度设置为 100%，它将仅获得内部宽度而不是窗口外的宽度

Answer 1

我遇到了完全相同的问题。我通过将 overflow-x: hidden; 放在 both body 和 html 上解决了这个问题。

html, body {
  margin: 0 auto;
  overflow-x: hidden;
}

html{
  padding: 0;
}

body {
  width: 950px;
}

.full {
  background: red;
  color: white;
  margin-right: -3000px !important;
  margin-left: -3000px !important;
  padding-right: 3000px !important;
  padding-left: 3000px !important;
}

<div>
  <div class="full">
    abc
  </div>
</div>