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中，它会将弹出窗口的大小设置为未声明的大小，并通过负余量减少过宽。

Answer 2

似乎存在以下问题：

<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>

attr data-width =“50”需要是data-width =“250”然后你需要添加

.blog_facebook_button { position: relative; }
.fb-like { position: absolute; top: 0; left: 0; }

Answer 3

这对我有用。

.fb-like span {
  overflow:visible !important; width:450px !important; margin-right:-400px;
}

Answer 4

看起来像div.fb-like - ＆gt;跨越试试CSS：

div.fb-like span {
    width: 450px;
    overflow: visible;
}

像弹出式对话的Facebook被切断到按钮的宽度

4 个答案: