android - 隐藏在 overflow 中的元素仍然可以在 android 上访问

Question

我有一个 Facebook 评论小部件包含在父 div 中，女巫使用隐藏的溢出垂直切割它。我以这种方式设置它，这样我就可以开始只显示部分内容，然后使用 jQuery 展开父容器。

这在每个主要浏览器(包括 iPhone 的 safari)上都很好用，但是在 Android 中(在 Android 4.0 上测试，在浏览器版本上不确定)溢出的 div 之外的内容虽然仍然不可见，但可以访问。用户可以点击他们看不到的链接，这显然是一种不受欢迎的行为。

我的 HTML:

<div class="pageBlock column5050 column2">          
  <div style="" class="ext_container">
    <div data-mobile="false" data-width="" data-num-posts="10" data-href="http://na.se/redesign2012/kundcenter" class="fb-comments  fb_iframe_widget">
      <span style="height: 1049px; width: 550px;">
        <iframe scrolling="no" id="fcb3ba7898c46" name="f169222f1ff27fe" style="border: medium none; overflow: hidden; height: 1049px; width: 550px;" class="fb_ltr " src="https://www.facebook.com/plugins/comments.php?api_key=113851685335230&amp;channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D8%23cb%3Df12db7f9bc71f98%26origin%3Dhttp%253A%252F%252Fna.se%252Ffb9561675e1892%26domain%3Dna.se%26relation%3Dparent.parent&amp;href=http%3A%2F%2Fna.se%2Fredesign2012%2Fkundcenter&amp;locale=sv_SE&amp;mobile=false&amp;numposts=10&amp;sdk=joey&amp;width=550"></iframe>
      </span>
    </div>
  </div>
  <div class="fb_expand_btn expand_btn">
    <span class="expand_capt">Visa fler...</span>
  </div>
  <script type="text/javascript">
    [...]js/jQuery to expand/contract "ext_container"[..]
  </script>

</div>

“ext_container”中的所有内容都是由 facebook 评论小部件生成的，由于我使用的是第三方 CMS，因此我对 HTML 的控制有限。

我使用以下 CSS

.fb-comments {
  width: 100% !important;
}

.fb-comments span, .fb-comments iframe {
  width: 100% !important;
}


.ext_container {
  position: relative;
  height: 440px;
  overflow: hidden;
  margin: 0 20px 20px;
}

.fb_expand_btn.expand_btn {
  margin: 0 20px;
}

我的脚本只改变了 ext_container 的高度。

我将 ext_container 设置为 position:relative，因为 IE7 错误会忽略我的 overflow:hidden。

最后，100% 的宽度是因为有一个完全流畅的布局。

无论如何，我已尝试找到对上述行为的任何引用，但无济于事，如果有人遇到此问题并提供解决方案，我将不胜感激。

Answer 1

我怀疑 iframe 正在获取浏览器默认宽度。尝试设置 iframe 的宽度属性，而不仅仅是设置宽度样式。

换句话说，尝试给 iframe 属性，

width="550"

iframe 和 css 并不总能很好地发挥作用，尤其是当涉及到溢出时。您还可以从设置高度属性中受益。