Facebook Like按钮与其他社交按钮不对齐。 使用CSS来修复它，但在其他浏览器中断

Question

CSS：

.share {
    width: 150px;
    height: 20px;
    background: #000;
    float: right;
    white-space: nowrap;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 3px;
    background-color:rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 5px;
    box-shadow: 0px 0px 10px #888;
    vertical-align: top;
}

HTML：

<div class="share">
    <div class="fb-like" data-href="http://bronies.info/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true" style="width:47px; overflow:hidden; top:-3px; left:3px;"></div>
    <a href="https://twitter.com/share" class="twitter-share-button" data-text="Wondered what the bronies were all about?" data-count="none">Tweet</a>
    <div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300" style="width:32px; overflow:hidden;"></div>
</div>

Chrome，Safari：

Internet Explorer，Firefox和Opera：

如果你能看到我在HTML style属性中做了什么，我使用top:-3px ，我在其他浏览器上测试我的网站之前做了这个（Chrome是我的主要网络浏览器）。 我使用top是因为快速谷歌搜索引导我一个页面指示我这样做。 既然这个解决方案不起作用，我将如何调整它以对齐并在所有Web浏览器上工作？

Answer 1

我的解决方案是：

.fb-like.fb_iframe_widget span{
  vertical-align: top !important;
}

Answer 2

你应该删除top:-3px; 完全。 因为你没有position:relative; Webkit（Chrome，Safari）正确地忽略了它，这是必需的（非static东西）来激活定位，但是Internet Explorer，Firefox和Opera都错误地认可它（-3px转移）。

编辑：

从评论...
Facebook的脚本在<div>添加<span> ，然后触发他们还提供的CSS规则： .fb_iframe_widget span { vertical-align: text-bottom; } .fb_iframe_widget span { vertical-align: text-bottom; } 。 我建议添加float: left; 到所有三个<div>标签，这样它们就不会共享一个共同的流（或基线）。

Answer 3

尝试使用top: auto并查看结果，检查并查看它是否在所有浏览器中处于相同位置。 如果它需要虚拟对齐，那么使用bottom: 3px; （或满足您需要的任何适当值）

• 不要忘记你必须定位：亲属; 你的代码

所以facebook按钮的最终样式应如下所示：

width:47px; overflow:hidden;position:relative; top:auto;  bottom:3px; left:3px;

Answer 4

我建议使用display: inline-block; 和vertical-align: middle; 用于Facebook按钮的容器...

Answer 5

我添加了vertical-align: text-bottom; 到<span>包围每个按钮（以匹配Facebook的功能），所有内容在Chrome，Firefox和IE中完美排列。 （我的跨度也有display: inline-block如果重要的话。）

Answer 6

尝试将此添加到“共享”div。 我不知道它在其他浏览器上看起来如何，但它似乎在Chrome中排列。

font-size: 0.1px;

Answer 7

我最终将每个按钮包装在他们自己的div中，然后将div设置为

display:inline-block; white-space: nowrap; vertical-align:top;

然后将以下内容添加到facebook特定的div：

#facebookButton > div > span {vertical-align:baseline;}

Answer 8

将以下样式添加到我的CSS将facebook分享按钮与其他社交图标对齐。

 .fb_iframe_widget{vertical-align:top;}

Answer 9

这是我的解决方案：通过inline-block元素包装每个社交按钮。 并且每个社交按钮都有display属性是block

HTML

<div class="social-share clearfix">
    <div class="social-share-item">
        <div id="fb-like" class="fb-like" data-href="{url}" data-layout="button_count" data-size="small" data-action="like" data-show-faces="true" data-share="true"></div>
    </div>
    <div class="social-share-item">
        <a class="twitter-share-button" href="https://twitter.com/intent/tweet">Tweet</a>
    </div>
    <div class="social-share-item">
        <div class="g-plus" data-action="share"></div>
    </div>
</div>

CSS

.social-share {
    display: block;
    background: #f9f9f9;
    padding: 0.2em 0.4em;
    margin-top: 1em;
}
.social-share-item > * {
    display: block;
    float: left;
}
.social-share-item {
    display: inline-block;
}

Answer 10

移动浏览器遇到了同样的问题，并通过以下方式解决了这个问题：

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