12

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>

铬，Safari：

Chrome 和 Safari

Internet Explorer、Firefox 和 Opera：

Internet Explorer、Firefox 和 Opera

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

4

10 回答 10

12

我的解决方案是：

.fb-like.fb_iframe_widget span{
  vertical-align: top !important;
}
于 2014-02-20T10:09:29.887 回答
10

您应该完全删除top:-3px;。因为您没有激活定位position:relative;所必需的 （不是static），所以 Webkit（Chrome、Safari）正确地忽略它，但 Internet Explorer、Firefox 和 Opera 错误地尊重它（-3px shift）。

编辑：

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

于 2012-09-15T05:14:44.717 回答
3

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

  • 不要忘记你必须定位：相对；到你的代码

所以 facebook 按钮的最终样式应该是这样的：

width:47px; overflow:hidden;position:relative; top:auto;  bottom:3px; left:3px;
于 2012-09-15T05:29:56.247 回答
1

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

于 2012-09-15T05:17:44.380 回答
1

我添加vertical-align: text-bottom;了<span>每个按钮（以匹配 Facebook 所做的），一切都在 Chrome、Firefox 和 IE 中完美排列。display: inline-block（如果这很重要，我的跨度也有。）

于 2013-01-11T08:11:45.113 回答
1

尝试将此添加到您的“共享”div。我不知道它在其他浏览器上的外观如何，但它似乎使 Chrome 中的内容排列整齐。

font-size: 0.1px;
于 2014-02-11T22:19:15.247 回答
0

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

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

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

#facebookButton > div > span {vertical-align:baseline;}
于 2013-04-23T09:45:12.607 回答
0

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

 .fb_iframe_widget{vertical-align:top;}
于 2014-03-28T10:37:58.083 回答
0

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;
}
于 2017-06-14T18:12:05.267 回答
0

我在使用移动浏览器时遇到了同样的问题，并通过以下方式解决了它：

.fb-like span{
    vertical-align: initial !important;
}
于 2017-11-04T08:37:05.643 回答