覆盖 iOS 上的 overflow-x CSS 属性答案

【问题标题】：Overriding overflow-x CSS property on iOS覆盖 iOS 上的 overflow-x CSS 属性
【发布时间】：2011-03-03 03:28:50
【问题描述】：

我们有一个移动网络应用程序的基本样式表，其中我们将 html 和 body 设置为 overflow-x:hidden 以防止任何水平滚动。

但是在 1 个页面上，我们有一个 iframe，它可以打开外部网站，其中一些不一定是针对移动设备优化的，因此我们希望允许水平滚动。

我以为我可以用overflow-x:auto !important 覆盖overflow-x:hidden，但它不起作用。我可以使它工作的唯一方法是删除所有溢出-x 的概念，并且滚动工作正常。它在 Safari + Chrome 中也能正常工作。

有什么想法吗？

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
  <head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>         
    <meta name = "viewport" content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />

    <style>

      /* Styles from existing style sheet */
      html, body {
        position:relative;
        height:100%;
        width:100%;
        padding:0;
        margin:0;
        overflow-x:hidden;
      }

      /* Overrides */
      html, body{
        width:auto !important;
        height:auto !important;
        overflow-x:auto !important;
      }

    </style>
  </head>
  <body>
    <iframe src="http://starbucks.com"></iframe>
  </body>
</html>

【问题讨论】：

标签： css iphone

【解决方案1】：

尝试overflow-x: visible; 代替？另外我不认为!importants 是必要的。

【讨论】：

甜蜜，可见的作品，谢谢。我仍然不明白为什么 auto 不起作用。我会删除 !important 的，他们是因为沮丧而偷偷溜进来的。
@Brian Stoner: visible 是overflow 及其单轴对应项的默认值。这意味着内容将明显溢出容器。另一方面，如果溢出，自动会导致滚动条出现。不过，在 Mobile Safari 中没有滚动条的概念，所以这就是问题所在。
啊，有道理。感谢您的回复，非常感谢。