4

ここで私のブログをチェックしてください：

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

「いいね」ボタンをクリックしようとすると、ポップアップはちょうどいい高さで出てきますが、幅はボタンの幅に制限されます。

これが私の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

これは私にとってはうまくいきました。

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

div.fb のように見えます -> span はそれを切り捨てています CSS を試してください:

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