html - 网络图标在 Internet Explorer 中稍微向下推？

Question

这个问题一直让我发疯，我正在做一些跨浏览器兼容性，我的网站在 Chrome、Firefox 和 Safari 中工作。然而，我注意到这个非常小的问题，它让我抓狂。我的社交网络图标对齐方式与它们在 Chrome、Safari 和 Firefox 中应有的对齐方式相同，但在 IE 中，它们看起来比应有的位置低 1 个像素。我已经搜索了与此相关的各种问题，但似乎找不到解决方案。我已经定义了 border、padding、margin、outline、line-height 和 height，但似乎没有什么可以解决的。我将图标包裹在一个容器中并显示为 inline-block my.代码如下。任何帮助将不胜感激。

HTML

    <div class="container" id="facebook"><a href="https://www.facebook.com/pages/Revived-Films/132089646842036"><img src="images/127695-simple-black-square-icon-social-media-logos-facebook-logo_fy10-188x188-1.png" alt="Facebook%20Icon"/></a></div>

    <div class="container" id="vimeo"><a href="https://vimeo.com/user4883685/videos"><img src="images/Black-icon_vimeo-188x188-2.png" alt="Vimeo%20Icon"/></a></div>

CSS

    .container {
      width: 100px;
      height: 22px;
      display: inline;
      margin: 0px 0px 0px 0px;
      padding: 0px;
      line-height: 22px;
      outline: 0px;
      border: 0px;
      }

     #vimeo {
      float: right;
      margin: 0px 5px 0px 0px;
      height: 22px;
      padding: 0px 0px 0px 0px;
      width: 24px;
      line-height: 22px;
      outline: 0px;
      border: 0px;
      }

     #facebook {
      float: right;
      margin: 0px 20px 0px 0px;
      height: 22px;
      padding: 0px 0px 0px 0px;
      width: 24px;
      line-height: 22px;
      outline: 0px;
      border: 0px;
      }

    #facebook a:hover img{
      opacity:0.50;
      }

    #vimeo a:hover img{
      opacity:0.50;
      }

Answer 1

试试这个脚本，用它你可以在 css 中专门选择每个浏览器或移动平台。

http://rafael.adm.br/css_browser_selector/