Question

我有一个Facebook评论框，只使用Facebook自己提供的docs提供的html5方法。最初它隐藏了一个名为.hide的CSS类，它只不过是display：none。每当我按下所需的反应按钮时，它会从注释所在的div中删除类隐藏，并显示注释。只有Chrome给我带来了困难，因为它会在评论下添加额外的空白空间。

我尝试通过使用JQuery检查浏览器来修复此问题，如果是Chrome则使用负边距值，这样问题就不会显示出来了。但是，如果添加了多个注释，则此负值是不够的，因为每个注释都会使空格变大。如果我不使用JQuery隐藏div，我没有额外的空白区域。我怎样才能获得这个额外不必要的空白区？

显示问题的网站：

http://www.trailercloud.nl/index.php

按“Reacties”文本按钮切换facebook评论div。它有时不会显示空白区域，但刷新后会显示它！

Answer 1

你可以试试这个：

$('.combut').on('click', function(){
    $('#vid_comments').toggleClass();
    if($('#vid_comments').is(':visible')){
        $('.fb_ltr').css({height:''});
    }
});

P.S。我正在使用控制台测试此代码您的页面。我发现你需要为.typeshare类添加高度。将typeshare类的高度设置为70px，它可以正常工作。

Answer 2

由于显式高度设置为嵌入式iframe，因此创建了您正在讨论的额外空白区域。它的浏览器高度为882像素（Mac OS X 10.7上的Chrome）。也许你可以用某种方式删除这个高度（例如使用javascript）？

尝试：

$(document).ready(function(){
    $('.fb-comments iframe').css({height: '282px', overflow: 'auto'});
});

这样做是否有效（可能会使用像素高度并为Chrome浏览器添加if语句）？

在JQuery在Chrome中显示它之后，Facebook评论显示了很多空白区域

2 个答案: