Facebook的喜歡彈出對話切斷按鈕的寬度

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上的一個令人窒息。我可以修復的是怎麼回事？

在此先感謝。

來源

2012-09-27 jeffkee

我也看到這個......太痛苦了！ –

@jeffkee你試過我的答案嗎？ –

-1

看起來像div.fb樣 - >跨度切它去嘗試CSS：

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

來源

2012-10-14 12:17:47 deborre

好像有一個問題：

<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數據寬度= 「50」需要是數據寬度= 「250」，然後需要添加

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

來源

2013-07-02 09:42:29

它可能需要一些調整，因爲我無法正確測試它。 –

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

把這個放在你的css中，它會將彈出窗口的大小設置爲未聲明的大小，並且會通過負餘量減少過度寬度。

來源

2013-10-07 08:30:59 zonzon

這對我有效。

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

來源

2015-06-12 01:29:42

Facebook的喜歡彈出對話切斷按鈕的寬度

回答

相關問題