android - 仅在 Android 上防止 'display:table' 垂直堆叠

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。这将确保列表项并排放置。