当您“喜欢”页面被截断时的 Facebook 共享窗口答案

【问题标题】：Facebook share window when you “Like” a page getting cutoff当您“喜欢”页面被截断时的 Facebook 共享窗口
【发布时间】：2014-04-26 01:15:51
【问题描述】：

我正在尝试将 FB 添加到我的网站。类似的似乎工作正常。但是，当有人单击“赞”按钮（在 Mac Lion 上使用 Firefox）时，会出现一个共享框，该框在我的页面上显示截断。理想情况下，我希望完全显示共享框，以便访问者可以分享他们的喜欢。如果这是不可能的，那么一起摆脱分享框，只留下“喜欢”。

这是它的外观：

facebook like http://www.sofiaandluis.com/public/facebook_like.png

代码如下： HTML

<div class="column-area">
    <div class="suscribe-social">
        <div class="up make-word-breakable">
            <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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=xxxxxx";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));</script>
            <div class="fb-like" data-href="https://www.facebook.com/pagename" data-send="false" data-width="300" data-show-faces="true" data-font="verdana"></div>
        </div>
        <div class="down make-word-breakable"></div>
    </div>

CSS

.column-area {
    width: 300px;
    display: block;
    box-sizing: border-box;
    float: left;
    margin-left: 2.127659574%;
}
.suscribe-social {
    border: 1px solid #E4E4E1;
    margin: 5px 0px 20px 0px;
}
.suscribe-social .up {
    padding: 10px;
    display: inline-block;
}
.make-work-breakable {
    word-wrap: break-word;
}

【问题讨论】：

标签： html css facebook firefox facebook-like

【解决方案1】：

我没有看到任何表明可以通过 FB api 进行配置的东西，但我相信这应该可以：

.fb-like {
    height: 20px;  // I think that's the button height, you might need to adjust
    overflow: hidden;
}

评论框仍会被加载，只是被隐藏。不知道那里是否会出现任何并发症，尽管我对此表示怀疑。

【讨论】：

嘿@ultranaut，我试过这样做，但没有用。我也尝试过溢出：对同一类可见但无济于事。还有其他建议吗？...我很惊讶这会如此复杂。谢谢
啊，好吧，我明白了，通过隐藏溢出我可以隐藏框。那会奏效。关于我可以做些什么以使其充分显示的任何想法？
您能提供您的代码的链接吗？很难说没有看到它在行动。当您说它不起作用时，这是否意味着它的显示与您添加之前一样？
这一切都取决于页面上发生的其他事情，就像我说的那样，不看代码很难说。
-1 对我的阅读理解，我完全专注于如何隐藏它，并错过了你的链接。

【解决方案2】：

好的，开始工作了。我删除了课程

.fb-like iframe {
    width: 290px !important;
}

【讨论】：

【解决方案3】：

我认为 FB 框被剪切是因为某些父元素具有“溢出：隐藏”属性。

此属性可能会阻止 FB 框超出该父元素的大小。

【讨论】：

【解决方案4】：

这已经很老了，但我想在这里添加另一个答案，它不涉及在我们的 css 上使用 !important。哪一个——老实说——看起来不太对。

.fb-like iframe { max-width:none; }

【讨论】：

【解决方案5】：

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

这应该工作......祝你好运

【讨论】：

【解决方案6】：

另外，位置：绝对；作用于按钮的持有者元素。

【讨论】：