为什么“脸书评论”iFrame在容器中加载CSS为“display:none”时会有不同的高度？
我正在编写一个web应用程序，它加载一个页面，然后使用javascript使用Facebook的XFBML代码显示Facebook的评论框。我在一个容器中有Facebook评论iframe，它在页面加载时被设置为"display: none“。稍后，当用户单击按钮时，将显示容器。
我遇到的问题是，当页面加载时，Facebook评论容器设置为"display: none"，Facebook加载的iframe的高度比预期的要大得多。但是，如果我在加载页面时将Facebook评论容器设置为"display: block“，然后在页面加载后将其设置为"display: none”，则iframe会获得适当的height属性。我很好奇是什么导致了iframe高度设置的差异。
我的解决办法是加载容器的样式设置为“display: block；height: 1px；width: 1px；border: none”的页面，然后在页面加载后使用javascript将容器设置为“display:none”。我只是好奇是什么导致了这种情况，以及是否有比我正在做的事情更好的解决办法。
谁能解释这个现象，告诉我建议的解决方案是什么？
作为参考，下面是我的标记的简化版本，没有解决方法。如果你在浏览器中加载它并点击“显示评论”按钮，你会看到大的灰色区域，这是Facebook的评论容器，比实际的评论框大得多。
<!DOCTYPE html>
<html>
<head>
<title>Facebook Commments Page</title>
<style type="text/css">
.initial-content { width: 100%; overflow: hidden; }
.show-comments-button { float: left; background: #aaa; padding: 6px;}
#facebook-comments { display: none; background: #eeeeee; }
</style>
<script>
function showComments(e){
var commentContainer = document.getElementById('facebook-comments');
commentContainer.style['display'] = 'block';
}
</script>
</head>
<body>
<div class="initial-content">
<h1>My little web app</h1>
<p>Here is the content a user sees when first loading the page.</p>
<div class="show-comments-button" onclick="showComments(event);">Show Comments</div>
</div>
<div id="facebook-comments">
<h1>Facebook Comments</h1>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="example.com" num_posts="2" width="500"></fb:comments>
</div>
</body>
</html>回答 1
Stack Overflow用户
发布于 2011-07-07 03:58:24
我不能确定，但也许display: none;是通过忽略height:属性来工作的--即使您设置了height，display: none;也会覆盖它(就像某些覆盖height的display: inline;一样)。
#facebook-comments { display: none; }然后用JS覆盖到display: block;
<script>
var commentContainer = document.getElementById('facebook-comments');
commentContainer.style['display'] = 'block';
function showComments(e){
...
}
</script>在加载你的Facebook评论之前。
<script>
var commentContainer = document.getElementById('facebook-comments');
commentContainer.style['display'] = 'none';
</script>也许不是最简单的方法，但它应该是可行的。
干杯!
https://stackoverflow.com/questions/6511135
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号