隐藏在 twitter/google 社交按钮后面的 Facebook 评论栏答案

【问题标题】：Facebook comment bar hidden behind twitter/google social buttons隐藏在 twitter/google 社交按钮后面的 Facebook 评论栏
【发布时间】：2012-08-24 23:25:05
【问题描述】：

找人帮忙解决这个问题。

当有人在我们的某个产品页面上点击“喜欢”时，下拉的评论部分会位于 twitter/google 社交按钮的后面，我似乎无法准确指出问题出在哪里。我尝试将溢出设置为可见/自动，但没有运气，但是当我更改高度时，它看起来没问题（尽管我不想更改高度，而是显示在顶部）。

Facebook 按钮周围的代码如下：

<div class="product-link">


    <iframe src="http://www.facebook.com/plugins/like.php?href=http://foscam-uk.com/indoor-ip-cameras/foscam-fi8918e-black-wired-ip-camera.html&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&appId=317980981630590"

        scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:auto; width:450px; height:30px">" </iframe>

<a href="https://twitter.com/share" class="twitter-share-button" data-via="FoscamUK">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><g:plusone size="medium"></g:plusone></div>


        </div>

还有一个产品页面的链接（可能更有用）：http://foscam-uk.com/foscam-fi8910w.html

非常感谢您的帮助。

问候

【问题讨论】：

标签： html css facebook magento

【解决方案1】：

iframe 上的高度和溢出的组合似乎没有按您的预期工作。

我的建议：将 iframe 嵌入到 DIV 元素中，并将该 DIV 元素格式化如下：

<div id="foobar"><iframe …></div>

#foobar {
  height:   30px:
  overflow: hidden;
  position: relative;
  z-index: 1;
}
#foobar:hover {
  overflow: visible;
}

之后，评论栏应显示在 twitter/g+ 按钮上方。

但是已经喜欢您页面的用户的“面孔”随后会显示在 twitter/g+ 按钮上。我建议您从 iframe 的 URL 中删除参数 &show_faces=true，因为显示面孔并不能真正适合您要使用的页面布局。

【讨论】：