Question

我正在使用snap.js（jakiestfu）和bootstrap。当我在标准的“互联网”浏览器中查看我的Android页面时，我得到一个填充，其中滚动条将位于普通浏览器中（参见图像http://s27.postimg.org/61osu9y03/example.jpg）。

此填充仅发生在snap.js的主要内容容器上，而不是滑动面板，如您所见。这是.snap-content：

的CSS

<pre>
.snap-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  overflow-y:scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
       -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
</pre>

- 当我将位置设置为相对时，填充消失了。

- 当我将溢出设置为隐藏或删除溢出标记时，填充消失了。然而，这会标记标记。

以下是一个工作示例http://koenjacobsdesign.nl/vf/index.html

请记住:(据我所知）这个问题出现在机器人标准的“互联网”浏览器上，它可以在移动设备上正常工作。

Answer 1

最终自己解决了这个问题，这是解决方案，也许它可以帮助其他人：

在逐个排除并包含我的所有样式表并拆开css代码后，我能够找出问题所在的位置。当您向“.snap-content”容器添加Box阴影时，通常会发生这种情况。我用边框替换了盒子阴影，现在它工作正常。

Snap.js和bootstrap，padding应该在哪里（在Android设备上）

1 个答案: