javascript - Facebook 的分享按钮有问题

Question

问题有 2 个，我认为 1 个与 HTML/CSS 相关，另一个与 JavaScript 相关。

第一个是这个 - 我在正确定位它时遇到了一些麻烦(它没有对齐)。当我将它设置为 display: inline-block; 时，它重新定位到其他也设置为 inline-block 的共享按钮下方。除 Facebook 的按钮外，所有 3 个按钮都正确对齐。

第二个问题似乎与 JavaScript 相关。该按钮可能会在页面上的其他所有内容都加载完后一秒钟后加载，我完全不知道为什么。

部分代码如下:

我的分享按钮:

<div class="fb-share-button" data-href="http://onyx.space/image/41" data-layout="button" data-size="small" data-mobile-iframe="true"></div>

javascript.js

(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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0';
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

使它们成为内联 block 的 CSS；

.twitter-share-button {
    display: inline-block !important;
}
.fb-share-button {
    display: inline-block !important;
}

Answer 1

这两个问题都是因为CSS。我认为您的 HTML DOM 有问题。对于共享按钮的澄清和不同的悬停效果，请检查按钮是否在悬停时闪烁。不同的悬停效果 - 如果您的按钮有背景颜色，在悬停时将其更改为文本颜色。如果它闪烁，您需要先正确安排 DOM。

你的 javascript 看起来很清晰