Question

以前的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>

Answer 1

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

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

Answer 2

我最近也遇到了许多问题...大多数Facebook图标......看起来他们已经改变了参考链接的编码和外观......他们的＆＃34;喜欢＆＃34;并且＆＃34;关注＆＃34; divs曾用于生成一个看起来很深的蓝色框图形，现在它们颜色更浅，更圆润...我不得不在某些页面上更改对齐，因为我刚刚使用了表格中的基本div ...我最后添加了CSS就像建议不仅控制Facebook链接，而是控制Linkedin，Twitter和Google+链接的对齐，如果将来有任何改变，我希望无需编辑任何页面。

Answer 3

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

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

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

这应该适用于跨浏览器。还有一个问题，Facebook按钮没有正确的边距/间距，并且“粘在”下一个按钮。添加这个或一些边距权限可以解决这个问题（根据您的设计调整宽度）。

.fb-like {
  width: 120px; 
}

似乎Facebook按钮没有关注Twitter和Google加按钮的实现（不再？）。

Answer 4

将这些类添加到您的css

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

Fiddle

Answer 5

除了脚本，我使用嵌入式链接，因此我可以控制它们的对齐方式：

SCRIPT：

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

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

5 个答案: