我的网络应用
<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]&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20&sdk=joey&><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]&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&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20&sdk=joey&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';
?
答案 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