Question

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

然而，在1页上，我们有一个打开外部网站的iframe，其中一些不一定是移动优化的，因此我们希望允许水平滚动。

我以为我可以覆盖overflow-x：hidden，溢出-x：auto！important，但它不起作用。我能使它工作的唯一方法是删除overflow-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>

Answer 1

尝试了overflow-x: visible;？我也不相信!important是必要的。

覆盖iOS上的overflow-x CSS属性

1 个答案: