Question

我在我的网页中使用以下代码，我想知道如何解决这个问题，以免发送按钮内容被切断。

以下是共享内容div代码的内容

 <div id="share_buttons_wrapper">
    <h4 style="text-align:center;">Share</h4>
    <div id="share_buttons_single_page">
        <div class="wdt_button">
            <g:plusone size="tall" href="https://mailincard.mysite.com"></g:plusone>
        </div>
        <div class="wdt_button">
           <script src="https:////platform.twitter.com/widgets.js" type="text/javascript"></script>
            <div>
                <a href="https://twitter.com/share" class="twitter-share-button"
                    data-url="https://mailincard.mysite.com"
                    data-text="I just filled in my card online"
                    data-count="vertical">Tweet</a>
            </div>
        </div>
        <div class="wdt_button">
            <div class="fb-like" data-href="https://mailincard.mysite.com" data-send="true" data-layout="box_count" data-width="450" data-show-faces="true" data-font="tahoma"></div>
        </div>
    </div>


</div>

<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 id="fb-root"></div>
<script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "https://connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

这是css

#share_buttons_wrapper 
{
 top:5px;
 left:850px;
 position: absolute;
 margin-left:5px;
 width: 86px;
 background-color: #eee;
 padding-top:2px;
 background-color : #EEE;
 border: 1px solid #CCC;

}
#share_buttons_single_page{
 background-color: #eee;
}

#share_buttons_single_page .wdt_button{
    clear:left;
    padding: 7px 0px 0px 16px;
    border-top: 1px solid #CCC;
    height:75px;
}

这是一个截图

enter image description here

Answer 1

您可以尝试使用overflow:visible

Answer 2

我有类似的问题，喜欢按钮飞出被切断。然后，一旦我找到了解决方案，飞出就会在搜索输入字段下被部分掩盖。这里是要修复的组合css（我在一个范围内有Likebox）。另外，定位Like按钮很棘手，因为我旁边有一个推文按钮，但是顶部和左边的css都有这个技巧。

.fb-like span {
/* http://wordpress.org/support/topic/facebook-like-button-flyout-getting-cut-off */
overflow: visible !important;
width:450px !important;
margin-right: -375px;
/* my additions */
z-index: 1000;
position: relative;
top: -4px;
left: -26px;
}

我希望这可以帮助别人，我花了2-3个小时就可以了。感谢评论中的提示。

Facebook发送按钮内容被切断

2 个答案: