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 库。它将使用当前名称和浏览器版本以及使用的操作系统向您的正文标签添加额外的类，因此您将能够编写特定的 css 来处理问题。这个库还有一个 Drupal 模块。

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

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