Facebook 按钮在 Firefox 和 Chrome 上呈现不同

Question

我在使用社交媒体“小部件”时遇到不一致的结果，更具体地说是 Facebook 的“赞”按钮。它在不同的浏览器上显示不同。

我正在尝试使用两个小部件的“大”版本。尽管 Chromium 可以毫无问题地显示 Twitter 小部件的大版本和小版本，但会出现一个完全不同的 Facebook 按钮。

乍一看，这似乎不是渲染问题，因为显然 facebook 正在为小部件使用不同的源 Assets ——注意白色的“f”和气球计数器。

是什么原因造成的，我该如何解决？

代码

<span class="fb-like"
data-size="large"
data-href="http://www.google.com"
data-layout="button_count"
data-action="like"
data-show-faces="false"
data-share="false"></span>

<a href="https://twitter.com/share"
class="twitter-share-button"
data-size="large"
data-text="TEXT"
data-url="http://www.google.com"
data-via="username"
data-related="username"
data-lang="pt"
data-show-count="false"></a>

<br>

<span class="fb-like"
data-size="small"
data-href="http://www.google.com"
data-layout="button_count"
data-action="like"
data-show-faces="false"
data-share="false"></span>

<a href="https://twitter.com/share"
class="twitter-share-button"
data-size="small"
data-text="TEXT"
data-url="http://www.google.com"
data-via="username"
data-related="username"
data-lang="pt"
data-show-count="false"></a>

<script type='text/javascript' src='//platform.twitter.com/widgets.js?ver=4.6.1'></script>
<script type='text/javascript' src='//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.8'></script>

结果

Firefox(50.1.0 Linux):

Chromium(51.0.2704.103 俄罗斯 Fedora 64 位):

Answer 1

它们在不同的浏览器上并没有不同的显示方式，如果用户未登录它们的显示方式不同(您可能已登录 Chrome 浏览器，这就是发生这种情况的原因)。

出于某种原因，Facebook 现在在用户登录或未登录时为其按钮使用不同的样式。整个事情都围绕着这个输入:

<input type="hidden" autocomplete="off" name="new_ui" value="true">

It's not a configurable feature ，他们只是随手发布东西。 :)