Facebook кнопки входа в 1000px Iframe причины ScrollBar мерцающего

Question

Моего WebApp использует

<fb:login-button> 

, который XFBML (расширяемый Facebook Markup Language) и оказанный:

<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 px 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 (один с классом = "фб-как"):

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