Facebook login (connect) button rendering in chrom

问题:

Today I realized that FB login button no longer renders correctly in chrome (maybe because of browser update - who knows). Take a look at this http://goo.gl/mK6sf website in both IE and Chrome. Each button has some extra 'padding-top' in chrome and the iframe is not hidden correctly. Here is png preview http://goo.gl/sfUl5

EDIT How to make FB login button to render correctly like in IE? Do you see similar issue on other websites? Has facebook changed something or it's Chrome to blame?

EDIT2 2013-01-16 Take a look at this thread: https://developers.facebook.com/bugs/592452207446912 This is probably Facebook API error. I will post a response when they fix it.

回答1:

Thanks to Matt Bower from Facebook developer's forum the temporary solution is:

#fb_login_button { 
    width: 80px; 
}
#fb_login_button span, 
#fb_login_button iframe {.
    width: 80px! important;
    height: 25px! important;
}

I still wait for Facebook developers to fix this issue.

回答2:

You can't use login plugin in iframe. Please use the JavaScript SDK and the XFBML or HTML5 implementations. Try this code:

<fb:login-button show-faces="false" width="200" max-rows="1"></fb:login-button>