Google PlusOne 按钮有一些底部边距答案

【问题标题】：Google PlusOne button has some bottom marginGoogle PlusOne 按钮有一些底部边距
【发布时间】：2011-08-24 09:06:23
【问题描述】：

我想知道我看到的问题是否仅针对我的网站，或者这是一个已知问题。

我有一些社交小部件可以很好地对齐，但由于某种原因，PlusOne 没有正确对齐。

我使用 Firebug 将它与 Facebook Like 小部件进行比较，根据 CSS，它们的高度完全相同，并且没有边距或填充。他们的 css 看起来是一样的。

<div>
        <fb:like layout="button_count" show_faces="false" width="90" action="like" font="verdana" colorscheme="light"></fb:like>

        <g:plusone size="medium"></g:plusone>

        <script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=d9550e2f-f25a-4e2e-ae45-7a51cf7e3d46&amp;type=website&amp;buttonText=Share%20item!&amp;embeds=true&amp;style=rotate"></script>
        &nbsp;<font face='Verdana, Arial, Helvetica, sans-serif' size='1'><a href='/mmh/recommend/send.php?prodid=$!product.id'><img src="/images/icons/icon_email.gif" border="0"> Email item</a></font>
</div>

实际上我有一个链接，我正在发生同样的事情：http://news.makemeheal.com/celebrity-plastic-surgery/jennifer-aniston-weighs-on-prince-williams-hair-loss/（如有必要，请减小窗口大小，以便 Fbook 和 G+ 在同一行）

【问题讨论】：

不幸的是该页面受到保护
你能给我看看 faceook 和 google plus one 的标记吗
编辑问题以显示标记

标签： javascript css google-plus-one

【解决方案1】：

使用这个：

<span style="position:relative; top:3px">
<div class="g-plusone" data-size="small" data-annotation="none"></div>
</span>

【讨论】：

【解决方案2】：

有同样的问题。我将 Google+ 代码放在 <div> 中，并使用 CSS 将 <div> 的 max-height 属性限制为 70px 并且它起作用了。

【讨论】：

【解决方案3】：

在 +1 按钮周围放置一个 div (class=froogle)，将它们全部浮动，然后根据需要设置样式。它对我有用：

.facebook-like, .twitter-share-button, .froogle {
  float: left;
  margin-right: 10px;
}

【讨论】：

【解决方案4】：

您可以尝试使用相对定位，例如将以下 CSS 添加到 G+ 按钮：

position: relative;
top: 5px; /* Or whatever looks right */

虽然它可能会解决您的问题，但它并不能准确地显示问题的原因。

【讨论】：

我收回它——它适用于“理论”。据我所知，在实践中，它们不会让您为标签本身添加样式。他们的 javascript 覆盖了我的内联样式
你能把 G+ 按钮放在一个容器中（例如 div）并应用样式吗？ Google 无法编辑容器元素的样式。