Javascript Facebook和谷歌+；按钮对齐停止工作

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

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

有人能告诉我这里出了什么问题吗

跟着我们
（功能（）{
var Buttonstolad=2；
$.getScript（'//connect.facebook.net/en_US/all.js'，function（）{
init（{appId:'277943145587768'，状态：true，cookie:true，xfbml:true}）；
FB.Event.subscribe（'xfbml.render'，onButtonLoaded）；
});
$.getScript（'https://apis.google.com/js/platform.js，函数（）{
$（'#uuuuu plusone_0 iframe'）。加载（ON按钮加载）
});
函数onButtonLoaded（）{
钮扣头；
如果（按钮图标===0）{
showButtonBlock（）；
}
}
函数showButtonBlock（）{
$（#social'）。动画（{opacity:1}，1000）；
}
})();

将这些类添加到css中

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

---

试试这个。我不能支持它在多个浏览器中一致地修复它

.fb类似{top:-4px；}

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

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

脚本：

<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>

（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_US/all.js#xfml=1&；appId=50093919333”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；

嵌入：

<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>

---

如果您查看Facebook按钮的CSS（HTML5代码），您将看到类似div.fb的包装后的第一个跨距具有

垂直对齐：底部属性。Google plus第一个渲染div具有
垂直对齐：基线属性

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

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

这应该可以跨浏览器使用。
还有一个问题是，Facebook按钮没有正确的边距/间距，并且“粘”到了下一个按钮上。添加此页边距或一些右侧页边距可以解决此问题（根据您的设计调整宽度）

Facebook按钮似乎不再遵循Twitter和Google plus按钮的实现方式（不再？）。
它们应该在同一条线上，所以这不起作用。我更感兴趣的是知道为什么它们之前是对齐的，然后突然变得不对齐。@KnocksX在同一条线上？他们在同一条线上…我遗漏了什么吗？就他们过去和现在的情况而言，我看不到你这边的风格声明…他们只是iFrame，google/fb可能会在他们这边设置css，但如果他们出于任何原因更改，你的…你应该为他们声明你自己的样式。他们目前在我的屏幕上不对齐。facebook按钮比G+按钮低几个像素。这不是你看到的吗？@KnocksX一点也不……我看到了完美的排列。JSFIDLE通过Firefox。您是否确认它也没有为您对齐（因为另一个用户报告它在他的浏览器中看起来很好）？是的，它没有为我在Chrome 33.0.1750.70 beta版或Firefox 27.0Thanks上对齐。但现在我想知道，对于报告它看起来正常的另一个用户来说，它是否会不一致。而且，它现在在iPhone和Nexus7上都坏了。仍然不确定代码在一夜之间被破坏的程度如何。代码更改（你的和第三方）和浏览器更改的组合使目标不断移动。我理解，只是想知道是谁造成的，Facebook还是谷歌。这是真的，但我的代码是在Facebook切换到新的蓝色图标后编写的。只有几个星期了。我猜他们还在“捣乱”他们。。。前几天晚上，我所有的FB链接都向右断开了，第二天它们就向左对齐了。。。至少可以说令人沮丧！
.fb-like > span {
  vertical-align: baseline !important;  
}

.fb-like {
  width: 120px; 
}