html - 博客上的某些图片只是偶尔出现

Question

请原谅我缺乏经验，因为我不是专业人士。

这是我正在设置的博客:http://cyclesguy.blogspot.com

问题是主 Logo 下方的社交媒体图标大部分时间都不会出现，直到我执行某些操作(到目前为止，我发现缩放和打开控制台会使图像出现)。

我真的不确定发生了什么，我需要一点帮助来解决这个问题。任何帮助将不胜感激。

这是 HTML 片段:

<div class='logocontainer'>
  <a class='logolink' href='https://cyclesguy.blogspot.com'>
    <img alt='Cycles Guy Logo Short' src='http://i.imgur.com/1l3re6Y.png?1'/>
  </a>
  <div id='headerlinks'>
    <a href='#'>
      <img alt='Facebook' src='http://i.imgur.com/rrBYf58.png' title='Facebook'/>
    </a>
    <a href='#'>
      <img alt='Twitter' src='http://i.imgur.com/Tj2tekG.png' title='Twitter'/>
    </a>
    <a href='#'>
      <img alt='Google Plus' src='http://i.imgur.com/0lmq5f9.png' title='Google Plus'/>
    </a>
    <a href='#'>
      <img alt='YouTube' src='http://i.imgur.com/0qf9Ghi.png' title='YouTube'/>
    </a>
  </div>
</div>

以及相关的 CSS 片段:

.logocontainer {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  align-items: center;
  transform: translate(-50%,-50%);
  height: auto;
  width: auto;
} 
#headerlinks {
  display: flex;
  justify-content: space-around;
  min-width: 500px;
  max-width: 40vw;
}
#headerlinks a {
  height: auto;
  width: auto;
}
#headerlinks a img {
  display: block;
  height: 100%;
  width: 4vw;
  min-width: 55px;
  -webkit-filter: drop-shadow(8px 8px 8px rgba(0,0,0,1));
  opacity: .5;
  max-width: 60px;
}
#headerlinks a img:hover {
  opacity: 1;
}
.logolink img {
  position: relative;
  z-index: 1000;
  min-width: 500px;
  max-width: 30vw;
  -webkit-filter: drop-shadow(10px 10px 10px #000);
  -moz-filter: drop-shadow(10px 10px 10px #000);
  -ms-filter: drop-shadow(10px 10px 10px #000);
  -o-filter: drop-shadow(10px 10px 10px #000);
  filter: drop-shadow(10px 10px 10px #000);
}
.logolink img:hover {
  -webkit-filter: brightness(110%) drop-shadow(10px 10px 10px #000);
  filter: brightness(110%) drop-shadow(10px 10px 10px #000);
  -moz-filter: brightness(110%) drop-shadow(10px 10px 10px #000);
  -ms-filter: brightness(110%) drop-shadow(10px 10px 10px #000);
  -o-filter: brightness(110%) drop-shadow(10px 10px 10px #000);
}
a.logolink {
  display: block;
  height: auto;
  width: auto;
}

我很乐意提供可能需要的任何其他信息。

编辑:这个问题现在似乎已经解决了。我没有对 HTML 或 CSS 进行任何更改，但将图像重新托管在 imgur 上，现在它似乎工作正常。早些时候，我使用了指向 http://www.iconfinder.com 的直接链接，这可能会导致问题。感谢所有回复的人。

Answer 1

#headerlinks 一个 img {
高度:100%；

这里的问题是图像的高度为 100%，它采用父级的高度(自动)，所以你不会真正知道父级的高度，你可以将高度修改为自动，或者只是删除它行，因为它会自动设置为该行。