CSS for Safari and Apple

Question

我有一个网站正在为一个客户构建，需要一些帮助。。。除了Safari和任何Apply设备外，所有浏览器中的一切看起来都很棒。

如果你在Chrome或FF上查看下面的链接，你会看到右上角的社交图标看起来不错，但在Safari或苹果设备上查看时，它们叠在一起。

我想知道我能做些什么来使它与跨浏览器兼容。。。。

http://msg.d1g.it

Answer 1

我不太确定为什么它在safari上不起作用，但为什么不将float:left应用于4个<a>，并给header_html一个已知的宽度，让它是350px，所以类似这样的东西：

.social_btns { /* give all your <a> this class */
   float:left;
}
.header_html {
   display:inline-block;
   float:right;
   line-height: 30px;
   padding-right: 10%;
   width:350px; /* add this line */
}

在safari 7.0.3上使用web检查器进行了测试