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

时间:2013-09-07 19:13:56

标签: javascript html css facebook

我的网络应用

<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像素,但它足以让所有浏览器在页面加载时将按钮渲染时暂时显示滚动条。

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

2 个答案:

答案 0 :(得分: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宽度规范会覆盖内联宽度规范。

答案 1 :(得分:0)

或者你可以将以下CSS添加到父div(class =&#34; fb-like&#34;):

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