移动Safari中忽略溢出-x值
我们将overflow-x值设置为隐藏在正文和可滚动元素上，但移动Safari忽略这些值。 在桌面上，溢出值工作正常。
相关代码：
body { overflow-x:hidden; width:320px; height:100%; min-height:100%; margin:0; background:-webkit-linear-gradient(top,#e8e4dc,#f2f0eb); } .page_list, .content { max-height:370px; box-sizing:border-box; padding:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch } #catalog_page { border-left:1px solid #CCC; z-index:28; position:absolute; top:0; width:200px; height:460px; background:white; -webkit-transition:-webkit-transform 0.1s ease-in;; -webkit-transform:translate3d(0,0,0); display:none; } catalog_page位于视口之外，只有在某人做了手势之后才能滑入视图。
重现：
1）在iPhone上访问www.tekiki.com （不是iPad）。 滚动到右侧，即使我们修正了主体宽度，您仍然会看到catalog_page如何扩展网站的宽度。
添加html { overflow: hidden; } html { overflow: hidden; }到你的CSS，它应该修复它。
在iOS 7.1 / 8.2上使用Mobile Safari进行testing以下代码对我来说都不适用。
html {overflow：hidden; }
我相信这是Mobile Safari的缺陷/function，其他浏览器（包括OSX上的Safari）运行良好。 但溢出：隐藏在iPhone / iPad的作品，如果你也设置位置：固定到HTML元素。 喜欢这个：
html {overflow：hidden; 位置：固定; }
添加HTML {overflow：hidden; }到你的CSS，它应该修复它。
这个解决scheme对我不起作用。
相反，我在体内创build一个包装div，并将overflow-x：hidden应用于包装：
CSS
#wrapper { overflow-x: hidden; }
HTML
<html> ... <body> <div id="wrapper"> ... </div> </body> </html>
在我的情况下，下面确实解决了这个问题
body, html { overflow-x: hidden; }
为了解决旧设备（iphone 3）的问题，我不得不混合这些解决scheme，因为它们不能单独工作。
我结束了添加一个包装div到html的身体：
<html> <body> <div id="wrapper">....</div> </body> </html>
并用以下的样式来devise：
#wrapper { overflow: hidden }
终于奏效了
如果html，body overflow-x: hidden; 是不是为你工作尝试寻找文字缩进。 例如flexslider的默认设置有一些元素设置为text-indent -9999px 。 我发现这是重写html溢出规则。