Question

这个问题一直让我发疯，我正在做一些跨浏览器兼容性，我的网站在Chrome，Firefox和Safari中工作。然而，我注意到这个非常小的问题，这让我疯狂。我的社交网络图标与Chrome，Safari和Firefox中的图标一致，但在IE中，它们会滑落到下面应该是1像素的位置。我搜索了与此相关的各种问题，我似乎无法找到解决方案。我已定义，边框，填充，边距，轮廓，线高和高度，似乎没有什么可以解决它。我将图标包装在一个容器中并显示为内嵌块我的。代码如下。任何帮助将不胜感激。

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/

网络图标在Internet Explorer中略微下推？

1 个答案: