防止'display：table'仅在Android上垂直堆叠

Question

我有一个简单的社交媒体菜单，其中包含一些不同的链接。在Chrome，Safari，FF，IE，iOS设备中，所有内容都应该显示为：

但在Android设备上，图标水平堆叠：

HTML：

<ul id="menu-social">
  <li>link to site</li>
  <li>link to site</li>
  <li>link to site</li>
  <li>link to site</li>
  <li>link to site</li>
</ul>

CSS：

ul#menu-social {
  margin: 0 auto;
  text-align: center;
  height:40px;
}
ul#menu-social li {
  float:left;
  display: table;
  padding: 0;
  text-align: center;
  width: 20%;
  margin: 0 auto;
  background: none;
}

Answer 1

你最好用你的CSS做这样的事情：

ul#menu-social {
  margin: 0 auto;
  height:40px;
  display: table;
  padding: 0;
}
ul#menu-social li {
  display: table-cell;
  padding: 0;
  text-align: center;
  width: 20%;
}

ul获取display: table，列表项为display: table-cell。这将确保列表项目并排。