html - 图标图像未以内联块方式显示

我有一个小虫子让我发疯。我有三个要以inline-block方式显示的社交媒体图标。据我所知，我的代码是正确的。我什至摘录了一段代码，看起来很正确。我查看了我的开发工具，没有发现任何导致此问题的原因。它发生在我的网站上，视口小于或等于640像素。由于屏幕小，这使得很难查看开发工具中的问题。

有人看到什么特别的东西吗？请在640px或以下的视口中查看页面。

Click here to see live

.nav-panel-container {
  position: fixed;
  width: 70%;
  height: 100%;
  top: 0;
  bottom: 0;
  background: #F0F0F0;
  z-index: 1;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.7s;
  -moz-transition-duration: 0.7s;
  transition-duration: 0.7s;
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.nav-panel-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 50px 0 0 0;
  overflow: auto;
  /* smooth scrolling on touch devices */
  -webkit-overflow-scrolling: touch;
}
#nav-social-container {
  bottom: 8%;
  position: absolute;
  text-align: center;
  display: block;
  width: 80%;
  margin-left: 10%;
}
#nav-social-title {
  font-size: .8em;
}
#nav-social-icons {
  display: inline-block;
  margin-top: 15px;
}
.nav-social-icon {
  padding: 0 15px;
  width: 100%;
}
.nav-social-icon:first-child {
  padding-left: 0;
}
.nav-social-icon:last-child {
  padding-right: 0;
}

<div class="nav-panel-container">
  <div class="nav-panel-content">
    <div id="nav-social-container">
      <div id="nav-social-title">DON'T BE SHY, LET'S GET SOCIAL.</div>
      <div id="nav-social-icons"><span class="nav-social-icon"><a href="http://facebook.com" target="_blank"><img src="http://optimumwebdesigns.com/icons/facebookBlack.png" alt="facebook" height="30px" width="30px"></a></span><span class="nav-social-icon"><a href="http://twitter.com" target="_blank"><img src="http://optimumwebdesigns.com/icons/twitterBlack.png" alt="twitter" height="30px" width="30px"></a></span>
        <span
        class="nav-social-icon">
          <a href="http://linkedin.com" target="_blank">
            <img src="http://optimumwebdesigns.com/icons/linkedInBlack.png" alt="linkedIn" height="30px" width="30px">
          </a>
          </span>
      </div>
    </div>

最佳答案

您正在使用<span>标记-这些是display:inline-将它们更改为block或inline-block。

关于html - 图标图像未以内联块方式显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35557004/