iphone - 移动 safari 中忽略的溢出 x 值

Question

我们将 body 和可滚动元素的 overflow-x 值设置为 hidden，但移动版 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 位于视口(viewport)之外，只有在有人做出手势后才会滑入 View 。

重现:

1) 访问www.tekiki.com在你的 iPhone(不是 iPad)上。向右滚动，您将看到 catalog_page 如何扩展网站的宽度，即使我们固定了正文宽度。

Answer 1

添加 html { overflow: hidden; } 添加到您的 CSS，它应该会修复它。