0

この問題は私を夢中にさせてきました。私はいくつかのクロスブラウザー互換性を行っており、サイトを 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;
      }
4

1 に答える 1