1

我有一个包含在父 div 中的 Facebook 评论小部件，女巫使用溢出隐藏将其垂直切割。我已经以这种方式进行了设置，这样我就可以开始只显示部分内容，然后使用 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 错误，它会忽略我的溢出：隐藏。

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

无论如何，我试图找到对上述行为的任何参考，但无济于事，如果有人遇到这个并有解决方案，我将不胜感激。

4

1 回答 1

0

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

换句话说，尝试为 iframe 赋予属性，

宽度=“550”

iframe 和 css 并不总是很好，尤其是在溢出时。您还可以从设置 height 属性中受益。

于 2012-07-02T14:10:41.960 回答