Question

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

以下是我设置的博客：http://cyclesguy.blogspot.com

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

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

这是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 a img { height: 100%;

这里的问题是图像的高度为100％，它取父母的高度（自动），因此你不会真正知道父母的身高，你可以将身高修改为自动，或者只是删除该行，因为它自动设置为该行。

博客上的某些图片偶尔会出现

1 个答案: