Facebook 和 Google+ 按钮对齐停止工作答案

【问题标题】：Facebook and Google+ button alignment stopped workingFacebook 和 Google+ 按钮对齐停止工作
【发布时间】：2014-02-06 23:12:35
【问题描述】：

截至几天前，以下 Google+ 和 Facebook 类似按钮已完全对齐。我没有对代码进行任何更改，但按钮停止对齐，正如我今天刚刚注意到的那样。

所有浏览器中的对齐都被破坏了，所以我假设已经对 Google+、Facebook 或 jquery 进行了一些更改，这是此页面上使用的唯一代码。

谁能告诉我这里出了什么问题？ fiddle

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div class="center" id="social">
    <div id="fb-root"></div>
    <p class="center">Follow us!</p>
    <div class="g-plusone" data-size="medium"></div>
    <div class="fb-like" data-href="https://www.facebook.com/Google" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</div>

<script>
(function() {
    var buttonsToLoad = 2;
    $.getScript('//connect.facebook.net/en_US/all.js', function() {
        FB.init({appId:'277943145587768',status:true,cookie:true,xfbml:true});
        FB.Event.subscribe('xfbml.render', onButtonLoaded);
    });
    $.getScript('https://apis.google.com/js/platform.js', function() {
        $('#___plusone_0 iframe').load(onButtonLoaded)
    });
    function onButtonLoaded() {
        buttonsToLoad--;
        if(buttonsToLoad === 0) {
            showButtonBlock();
        }
    }
    function showButtonBlock() {
        $('#social').animate({opacity : 1}, 1000);
    }
})();
</script>

【问题讨论】：

标签： javascript jquery facebook google-plus

【解决方案1】：

试试这个。我不能说它在多个浏览器中始终如一地修复它。

.fb-like { top: -4px; }

【讨论】：

您是否确认它也不适合您（因为另一位用户报告说它在他的浏览器中看起来不错）？
是的，我在 Chrome 33.0.1750.70 beta 或 Firefox 27.0 上没有对齐
谢谢。但现在我想知道它是否会与报告它看起来不错的其他用户不一致。此外，它现在在 iPhone 和 Nexus 7 上被破坏了。仍然不确定如何完美地工作代码在一夜之间被破坏。
代码更改（您的和第三方的）和浏览器更改的组合构成了一个不断变化的目标。
我明白，只是想知道是谁造成的，Facebook 或 Google。

【解决方案2】：

我最近在对齐方面也遇到了很多问题...主要是 Facebook 图标...看起来他们已经改变了参考链接的编码和外观...他们的“喜欢”和“关注”div 过去产生一个深蓝色的盒子，看起来图形，现在它们的颜色更浅，更圆润......我不得不改变一些页面上的对齐方式，因为我刚刚在表格中使用了基本的 div......我最终添加了 CSS，就像建议的那样不仅可以控制 Facebook 链接的对齐方式，还可以控制 Linkedin、Twitter 和 Google+ 链接的对齐方式，因此，如果将来它们中的任何一个发生变化，我希望无需编辑任何页面即可覆盖。

【讨论】：

没错，但我的代码是在 Facebook 切换到新的蓝色图标后编写的。它只有几周大。
我的猜测是他们仍然在“搞乱”他们......前几天晚上我所有的 FB 链接都偏向右侧，而第二天它们都对齐到左侧...令人沮丧至少可以说！

【解决方案3】：

如果您查看 Facebook 按钮的 CSS（HTML5 代码），您会看到 div.fb 类包装器之后的第一个跨度具有 vertical-align: bottom; 属性。 Google plus 首次呈现的 div 具有 vertical-align: baseline; 属性。

将此添加到您的 CSS 将解决垂直对齐问题：

.fb-like > span {
  vertical-align: baseline !important;  
}

这应该可以跨浏览器工作。也可能存在 Facebook 按钮没有右边距/间距并且“粘”到下一个按钮的问题。添加这个或一些margin-right可以解决这个问题（使宽度适应您的设计）。

.fb-like {
  width: 120px; 
}

Facebook 按钮似乎不再遵循 Twitter 和 Google 加号按钮的实现（不再？）。

【讨论】：

【解决方案4】：

将这些类添加到您的 CSS 中

.fb-like {display:block; float:left; margin-right:10px;}
.g-plusone {display:block;  float:left;}

Fiddle

【讨论】：

他们应该在同一行，所以这行不通。我更想知道为什么它们之前对齐，然后突然变得不对齐。
@KnocksX 在同一行？他们在同一条线上……我错过了什么吗？
就它们过去和现在的情况而言，我没有看到你的样式声明......它们只是 iframe，google/fb 可能会在它们的末端设置 css，但如果它们改变无论出于何种原因，您都被卡住了……您应该始终为他们声明自己的样式。
它们目前在我的屏幕上没有对齐。 facebook 按钮比 G+ 按钮低几个像素。这不是你看到的吗？
@KnocksX 一点也不……我看到了完美的对齐。 JSFiddle 通过 Firefox。

【解决方案5】：

除了脚本之外，我还使用嵌入式链接，以便控制它们的对齐方式：

脚本：

<div id="fb-root"></div>
<script>
    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&#038;appId=50093919333";
        fjs.parentNode.insertBefore(js, fjs);
    } (document, 'script', 'facebook-jssdk'));
</script>

嵌入：

<div class="fb-like" data-href="https://anaconda-development.com" data-send="true" data-height="20" data-width="280" data-show-faces="false" data-font="tahoma" style="height: 20px" ></div>
<div class="fb-follow" data-href="https://www.facebook.com/anacondadevelopment" data-show-faces="false" data-font="tahoma" data-width="280" data-height="20" style="height: 20px" ></div>

【讨论】：