14

我已经做了一些测试，据我所知，ios6 上的移动 Safari 存在一个错误。

当添加标签并将元素移出主体时，使用它会overflow:hidden为该元素创建一个额外的可滚动空间。在所有桌面浏览器上，它都是“隐藏的”。bodytransform:translateX(100%);

这是一个演示：http: //jsfiddle.net/mUB5d/1。在 Mobile safari 中打开它，你会看到有什么问题。

任何人都可以查看 Mac OS 上的 safari 6 以查看该错误是否也存在？除了围绕我的元素创建另一个父级之外，有人知道任何解决方法吗？

感谢您的反馈意见！

4

4 回答 4

9

没有。Mac 上的 Safari 6 不存在该错误。滚动条不存在。

我在 OSX Mountain Lion (10.8.2) 上运行它

在此处输入图像描述

为了进一步回答您的问题，发生这种情况的原因可能更多地与 Mobile Safari 的缩放渲染有关，而不是溢出隐藏错误。该元素实际上被隐藏在屏幕外（注意下面我一直向右滚动的位置，它仍然没有向我显示完整的 100% 宽度元素 - 其中 90% 实际上是隐藏的。

它可能与 iframe 和页面缩放有关。不过看起来仍然像一个错误。

我假设您是在 JSFiddle 中从一个真实的例子中演示的。如果您回到现实生活中的示例（除了 iframe 领域），如果您还没有此元标记，请尝试将其添加到头部，并查看它有帮助：

<meta name="viewport" content="width=device-width, initial-scale=1">

在此处输入图像描述

于 2012-11-13T17:09:34.903 回答
7

这是 iOS 上的正常行为（仅限 iOS）。overflow: hidden您可以通过同时声明html和body元素来解决它。此外，您应该将 body 设置为position: relative.

溢出行为

这里有几件事在起作用。要了解修复工作的原因，我们首先需要看看视口溢出是如何设置的。

  • 视口的溢出由html元素的溢出设置决定。
  • 但只要您将html元素的溢出保留为默认值 ( visible)，主体的溢出设置也会应用于视口。即，您可以在目标视口时设置html或body设置。overflow: hidden到目前为止，body 元素本身的溢出行为不受影响。
  • 现在，如果您将html元素的溢出设置为 以外的任何值，则不再发生visible从到视口的转移。body在您的特定情况下，如果您将两个溢出都hidden设置为 ，则html元素的设置将应用于视口，并且body元素也会隐藏其溢出。

实际上，在每个相当现代的浏览器中都是如此，而不是特定于 iOS。

iOS 怪癖

现在，iOS 忽略overflow: hidden了视口。无论您在 CSS 中声明什么，浏览器都保留将内容作为一个整体显示的权利。这是故意的，而不是错误，并且在 iOS 7 和 8 中仍然如此。对此也没有任何人可以做的事情 - 它无法关闭。

但是您可以通过使主体元素本身而不是视口隐藏其溢出来解决它。要做到这一点，您必须首先将html元素的溢出设置为除 之外的任何值visible，例如设置为auto或hidden（在 iOS 中，两者没有区别）。这样，body 溢出设置不会转移到视口，并且当您将其设置为时实际上会粘在 body 元素上overflow: hidden。

有了它，大多数内容都被隐藏了。但是仍然有一个例外：绝对定位的元素。它们的最终偏移父对象是视口，而不是主体。如果它们位于屏幕外、右侧或底部的某个位置，您仍然可以滚动到它们。为了防止这种情况，您可以简单地将 body 元素设置为position: relative，这使其成为定位内容的偏移父级，并防止这些元素脱离 body 框。

用代码回答

最后要注意一个问题：主体本身不能大于视口。

所以body需要设置为视口宽度和高度的100%。（实现它的纯 CSS 方法的功劳归于这个 SO answer。）html和body元素的边距必须为 0，并且 也html不能有填充或边框。

最后，为了处理 body padding，并且如果你想在 body 上设置一个边框，让数学与box-sizing: border-boxbody 一起工作。

所以这里。

html {
  overflow: hidden;

  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
}

body {
  overflow: hidden;
  position: relative;

  box-sizing: border-box;
  margin: 0;
  height: 100%;
}

NB 你可以随意设置body padding 和border。

于 2015-02-23T12:04:15.417 回答
1

在为此苦苦挣扎了一段时间后，我发现html和body标签都需要隐藏溢出才能真正隐藏溢出的内容。在body溢出隐藏的元素上工作正常，所以我们的选择是额外的 css 规则或包装元素。

于 2013-08-23T05:26:10.343 回答
0

对我来说它有效

我已经在左侧菜单中实现了

if($('.left-menu-panel').is(':visible')) {$("body").addClass('left-menu-open');$("html").css('overflow-y','hidden'); $('body').click(function() {$("body").removeClass("left-menu-open") ;$("html").css('overflow-y','visible'); });$('#off-canvas-left').click(function(event){event.stopPropagation();}); }
于 2016-08-31T10:19:22.767 回答