Google 加号图标在 Safari 浏览器中换行

Question

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

在 safari 中没那么多：

在歌剧中也休息:

这是我的 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

不要像 Av Avt 提到的那样使用 float，而是像这样在每个 class 上使用 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;
}

Answer 2

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

Google 加号图标在 Safari 浏览器中换行

Google plus icon breaks line in safari

html

css

safari

opera