html - Font Awesome 滚动条

Question

看到一个类似的问题，但在有人指出我的方向之前没有针对我的特定问题的答案。

我的 font awesome 图标在 Windows Chrome 而不是 mac 上显示滚动条。溢出隐藏将不起作用或 webkit css 样式。尝试在特定类和所有相关的 div 上 overflow hidden 。

* {
    padding: 0px;
    margin: 0px;
    overflow-x: hidden;
}


#social-media {
  padding-top: 50px;
}

#social-media-icons {
  font-size: 50px;
  text-align: center;
  margin-top: 25px;
  overflow: hidden;
}

.instagram-icon, .mixcloud-icon, .facebook-icon {
  padding: 30px;
  display: inline;
}

<div id="second-section">
    <div id="social-media">
		<h1 class="social-media-title">Social Media</h1>
		<div id="social-media-icons">
			<div class="instagram-icon">
				<a href="https://www.instagram.com/area_808/" target="blank" class="instagram-link">
					<i class="fab fa-instagram"></i>
				</a>
			</div>
			<div class="mixcloud-icon">
				<a href="https://www.mixcloud.com/Area808/" target="blank" class="mixcloud-link">
					<i class="fab fa-mixcloud"></i>
				</a>
			</div>
			<div class="facebook-icon">
				<a href="" target="blank" class="facebook-link">
					<i class="fab fa-facebook"></i>
				</a>
			</div>
		</div>
	</div
</div>

Answer 1

这不是滚动条但是 因为你把图标放在<a>里面了这条小线出现了，这是 <a> 的默认行为标记(即a { text-decoration: underline })，

所以只需添加 a {text-decoration: none;} :

#social-media {
  padding-top: 50px;
}

#social-media-icons {
  font-size: 50px;
  text-align: center;
  margin-top: 25px;
  overflow: hidden;
}

.instagram-icon, .mixcloud-icon, .facebook-icon {
  padding: 30px;
  display: inline;
}
a {
  text-decoration: none;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<div id="social-media">
  <h1 class="social-media-title">Social Media</h1>
  <div id="social-media-icons">
      <div class="instagram-icon">
          <a href="#" target="blank" class="instagram-link">
              <i class="fab fa-instagram"></i>
          </a>
      </div>
      <div class="mixcloud-icon">
          <a href="#" target="blank" class="mixcloud-link">
              <i class="fab fa-mixcloud"></i>
          </a>
      </div>
      <div class="facebook-icon">
          <a href="#" target="blank" class="facebook-link">
              <i class="fab fa-facebook"></i>
          </a>
      </div>
  </div>
</div>