html - Facebook 之类的弹出对话框被截断到按钮的宽度

Question

在这里查看我的博客:

http://www.brixwork.com/realtors/blog/seo/best-time-to-post-on-facebook-or-twitter-and-email/

当您尝试单击“LIKE”按钮时，弹出窗口出现在正确的高度，但宽度限制为按钮的宽度。

这是我的 CSS 代码:

.blog_social_media {
    float: right;
    border-left: 1px dotted #666;
    margin-bottom: 10px;
    margin-left: 10px;
    padding-top: 10px;
    overflow: visible;
}

.blog_social_media div {
    position:relative;
    display:block;
    float:left;
}

iframe.fb_ltr {
    width: 300px !important;
}

.blog_twitter_button {
    width: 55px;
    height: 62px;
    margin: 0px 0px 10px 10px;
}

.blog_facebook_button {
    width: 50px;
    height: 63px;
    overflow: visible !important;
    margin: 0px 0px 10px 10px;
}

.blog_googleplus_button {
    width: 50px;
    height: 64px;
    margin: 0px 0px 10px 10px;
}

这是 HTML 代码:

<div class="blog_social_media" style="width:65px; height:auto;">
    <div class="blog_twitter_button">
        <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="brixwork" data-related="sonikastudios">Tweet</a>
        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </div>
    <div class="blog_facebook_button">
        <div class="fb-like" data-href="http://www.brixwork.com/realtors/blog/seo/three-reasons-to-claim-your-place-on-google-places/" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false" data-font="lucida grande">
        </div>
    </div>
    <div class="blog_googleplus_button">
        <!-- Place this tag where you want the +1 button to render -->
        <g:plusone size="tall"></g:plusone>

        <!-- Place this render call where appropriate -->
        <script type="text/javascript">
            (function() {
                var po = document.createElement('script'); 
                po.type = 'text/javascript'; 
                po.async = true;
                po.src = 'https://apis.google.com/js/plusone.js';
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(po, s);
            })();
        </script>
    </div>                  
</div>

我有溢出:可见；设置包含 facebook 气球的所有元素。相同的 CSS 逻辑在 Google+ 弹出对话框中工作得很好，只是 Facebook 的令人窒息。我可以解决的问题是什么？

提前致谢。

Answer 1

.fb_edge_widget_with_comment span
{overflow:visible !important; width:450px !important; margin-right:-375px;}

将其放入您的 css 中，它将弹出窗口的大小设置为其未声明的大小，并通过负边距减少超宽。