0

这个问题一直让我发疯，我正在做一些跨浏览器兼容性，并且我的网站在 Chrome、Firefox 和 Safari 中运行。然而，我注意到了一个非常小的问题，它让我发疯。我的社交网络图标与 Chrome、Safari 和 Firefox 中的对齐方式一样，但在 IE 中它们会滑落到应该在 1 像素以下的位置。我已经搜索了与此相关的各种问题，但似乎找不到解决方案。我已经定义了边框、填充、边距、轮廓、行高和高度，但似乎没有任何东西可以解决它。我将图标包装在一个容器中并显示为 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;
      }
4

1 回答 1

0

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

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

于 2013-11-08T08:58:17.920 回答