Google PlusOne按钮有一些底部边距

时间:2011-08-24 09:06:23

标签: javascript css google-plus-one

plusone compared to others

我想知道我看到的问题是否仅适用于我的网站,或者这是否是一个已知问题。

我有一些社交小部件很好地对齐,但由于某些原因,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 +在同一行)

4 个答案:

答案 0 :(得分:3)

使用此:

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

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

有同样的问题。我将Google+代码放在<div>中,并使用CSS将max-height <div>的{​​{1}}属性限制为70px,并且有效。

答案 3 :(得分:0)

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

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