Font令人惊叹的滚动条

Question

我看到了一个类似的问题，但在有人将我引向那个方向之前，我的具体问题没有答案。

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

​

* {
    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

这不是scrollbar ，而是，因为您将图标放在<a>内，会出现这一小行，这是<a> tag (即scrollbar )的默认行为，

所以只需简单地添加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>

​

Answer 2

对所有a标记应用text-decoration: none;。

这很好用。

Answer 3

您正在以*样式使用overflow-x:hidden。相反，将其放在body中。