【问题标题】：Facebook button renders differently on Firefox vs ChromeFacebook 按钮在 Firefox 和 Chrome 上的呈现方式不同
【发布时间】：2017-05-14 02:13:20
【问题描述】：

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

我正在尝试使用这两个小部件的“大”版本。虽然 Chromium 可以毫无问题地显示 twitter 小部件的大小版本，但会显示一个完全不同的 facebook 按钮。

乍一看，这似乎不是渲染问题，因为显然 facebook 正在为小部件使用不同的源资产——注意白色的“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>

结果

火狐（50.1.0 Linux）：

Chromium（51.0.2704.103 俄罗斯 Fedora 64 位）：

【问题讨论】：

使用layout 属性而不是data-layout 属性。（试一试）

标签： facebook cross-browser widget facebook-like

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

Facebook 为登录用户和未登录用户推出了新的更新。这就是为什么您会看到不同的按钮。虽然改变这是不可能的，但我想到的另一件事是明确更改默认值并覆盖 CSS aka CSS Reset。

默认：https://developers.facebook.com/docs/plugins/share-button/

还有这个： Why jquery ui button looks different in Firefox and Chrome

【讨论】：