CSS浏览器特定边距

Question

我一直在努力争取在浏览器中排列几个元素。如果重要的话，我在Drupal 7工作。

我正在使用本地vbox vagrant机器，所以我无法链接到内容。它也不会让我发布图片，所以这里是指向显示内容的两个变体的链接：

地球和社交图标是来自Glyphicons的字体，而ssrn图标是我创建的用于模仿它们的png。我的问题是他们没有以同样的方式回应利润率。我认为它与必须给予glyphicons一个负的上边距以排列它们有关，但是在某些浏览器中使ssrn图标脱节。有没有办法根据webkit等定义边距？我找不到一个。

HTML：

    <div class="views-field views-field-field-website">        <div class="field-content"><div id="website">
<a href="test" title="test" target="_blank" class="glyphicons global"></a>
</div></div>  </div>  
  <div class="views-field views-field-field-ssrn">        <div class="field-content"><a href="http://test" title="test" target="_blank">
<div id="ssrn"></div>
</a></div>  </div>  
  <div class="views-field views-field-field-linked-in">        <div class="field-content"><div class="bio-social">
<a href="test" class="social linked_in" title="test" target="_blank"></a>
<div></div>  </div>  
  <div class="views-field views-field-field-twitter">        <div class="field-content"><div class="bio-social">
<a href="test" class="social twitter" title="test" target="_blank"></a>
<div></div>  </div> 

CSS：

#website {float: left; width: 24px; margin: 5px 10px 5px 0; width: 48px; height: 48px;}
#website a::before {color: #00479A; font-size: 48px; margin-top: -14px;}
#website a:hover:before {color: #444444;}

#ssrn {height: 48px; width: 48px; float: left; 
margin: 5px 10px 5px 0px; /* FIX CROSS BROWSER MARGIN ISSUE!!!!!! */
background-image:url('/sites/all/themes/seeblue_law_subtheme/icons/ssrn1.png'); background-size: 48px;}
#ssrn:hover {background-image:url('/sites/all/themes/seeblue_law_subtheme/icons/ssrn2.png');}

.bio-social {float: left; margin: 5px 10px 5px 0; height: 48px; width: 48px;}
.bio-social a::before {color: #00479A; font-size: 48px; margin-top: -13px;}
.bio-social a:hover:before {color: #444444;}

Answer 1

以下属性在每个方案中都不起作用，但包含在Webkit中。

-webkit-margin-before:
-webkit-margin-end:
-webkit-margin-after:
-webkit-margin-start:

-webkit-padding-before:
-webkit-padding-end:
-webkit-padding-after:
-webkit-padding-start:

您可以在this页面查看更多信息。

另外，您是否在开始测试之前重置了CSS？

Answer 2

您可以使用http://browserclass.org/这是一个独立的JavaScript库。它将使用浏览器的当前名称和版本以及使用过的操作系统为您的body标签添加额外的类，这样您就可以编写特定的css来处理问题。这个lib也有一个Drupal模块。

例如，您可以在css中声明：

  .ff.ff28.mac  .bio-social { ... }