Google plus图标在Safari中突破了一行

Question

我的页面底部有共享按钮，在Chrome和Firefox中看起来不错：

在野生动物园中没那么多：

在歌剧院休息时间：

这是我的HTML：

<div class="social">
              <div class='custom-tweeter-follow'>
                <a class="twitter-follow-button" href="https://twitter.com/mycompany" data-show-count='false'>Follow @mycompany</a>
              </div>
              <div class="fb-like" data-href="https://www.facebook.com/mycompany" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
              <div class='custom-gplus-follow'>
                <g:plusone size="medium" count="false" href='https://plus.google.com/xxx'></g:plusone>
              </div>
              <div syle='clear:both'></div>
</div>

这是我的css：

.copyright {
  float: left
  line-height: 25px
  font-weight: 300
  font-size: 14px
  width: 240px
}

.custom-tweeter-follow {
    float: left
    margin: 5px 10px 0px 0px
}
.custom-gplus-follow {
    float: right
    margin: 5px 0px 0px 0px
}

我在这里做错了什么？我怎么能在将来避免这样的事情，这应该是非常标准的（抱歉不是UI开发人员）人们在做什么。

Answer 1

好的，所以将custom-gplus-follow移动到social的开头可以解决问题，因为float: right元素需要在html中的其他元素之前保持在同一行。

Answer 2

不要使用float作为Av Avt提及，而是在每个类上使用display: inline;，如下所示：

.copyright {
  display: inline;
  line-height: 25px;
  font-weight: 300;
  font-size: 14px;
  width: 240px;
}
.custom-tweeter-follow {
  display: inline;
  margin: 5px 10px 0px 0px;
}
.custom-gplus-follow {
  display: inline;
  margin: 5px 0px 0px 0px;
}
.fb-like {
  display: inline;
}