javascript - Facebook 登录按钮的 1000px iframe 导致滚动条闪烁

Question

我的网络应用程序使用

<fb:login-button>

它是 XFBML（扩展 Facebook 标记语言）并呈现为：

<fb:login-button login_text="" class=" fb_iframe_widget" fb-xfbml-state="parsed" fb-iframe-plugin-query="app_id=[my app ID]&amp;locale=en_US&amp;login_text=%0A%20%20%20%20%20%20%20%20&amp;sdk=joey&amp;><span style="vertical-align: top; width: 0px; height: 0px;"><iframe name="f1987cba84" width="1000px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:login_button Facebook Social Plugin" src="http://www.facebook.com/plugins/login_button.php?app_id=[my app ID]&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D27%23cb%3Df15dab5c84%26domain%3Dmyapp.com%26origin%3Dhttp%253A%252F%252Fmyapp.com%252Ff1e9e1d5b8%26relation%3Dparent.parent&amp;locale=en_US&amp;login_text=%0A%20%20%20%20%20%20%20%20&amp;sdk=joey&amp;size=xlarge" style="border: none; visibility: hidden;"></iframe></span></fb:login-button>"

出于某种原因，该按钮包含一个 1000 x 1000 像素的 iframe。当然，这实际上并不会在网页上显示为 1000 x 1000 像素，但足以让所有浏览器在按钮渲染时在页面加载时临时显示滚动条。

有没有办法阻止这个滚动条闪烁，除了隐藏滚动条在 CSS 中使用overflow:hidden，然后document.body.style.overflow = 'visible';在按钮完成渲染后在 Javascript 中设置？

Answer 1

如果您不需要 1000 像素的 iframe，则始终可以使用 CSS 指定不同的宽度。

http://jsfiddle.net/jjordanca/6UEHp/

HTML：

<p>Hi.</p>

<iframe width="1000px" height="300px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:login_button Facebook Social Plugin" src="http://www.microsoft.com"></iframe>

<p>Bye.</p>

CSS：

iframe {position: relative; width: 500px;}

请注意，CSS 宽度规范覆盖了内联宽度规范。

Answer 2

或者，您可以将以下 CSS 添加到父 div（带有 class="fb-like" 的那个）：

width: 48px; height: 20px; overflow: hidden; text-align: left