Question

在有人指出我朝那个方向前进之前，也曾见过类似的问题，但对我的具体问题没有答案。

我字体很棒的图标在Windows Chrome浏览器上显示滚动条，但在Mac上却没有。隐藏的溢出将不起作用或Webkit CSS样式。尝试将溢出隐藏在特定的类以及所有div上。

import React from "react";
import { connect } from "react-redux";
const mapStateToProps = state => {
  return { articles: state.articles };
};
const ConnectedList = ({ articles }) => (
  <ul className="list-group list-group-flush">
    {articles.map(el => (
      <li className="list-group-item" key={el.id}>
        {el.title}
      </li>
    ))}
  </ul>
);
const List = connect(mapStateToProps)(ConnectedList);
export default List;

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

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>

Answer 2

为所有libstdc++-8-dev标签应用text-decoration: none;。

这很好用。

Answer 3

您正在以overflow-x:hidden风格使用*。而是将其放在body中。

字体真棒滚动条

3 个答案: