4

在这里查看我的博客：

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 令人窒息。我能解决什么问题？

提前致谢。

4

4 回答 4

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

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

于 2013-10-07T08:30:59.650 回答
0

好像有问题：

<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; }
于 2013-07-02T09:42:29.340 回答
0

这对我有用。

.fb-like span {
  overflow:visible !important; width:450px !important; margin-right:-400px;
}
于 2015-06-12T01:29:42.460 回答
-1

看起来像 div.fb-like -> span 正在切断它尝试 CSS：

div.fb-like span {
    width: 450px;
    overflow: visible;
}
于 2012-10-14T12:17:47.000 回答