htmt列表重叠在iPad上

Question

我们在iPad（iOS7）中有一个奇怪的问题 - 见下图：

在台式机和其他设备上看起来很不错：

该列表的代码非常简单：

<ul>
  <li><a href="#">Transitioning Veterans</a></li>
  <li><a href="#">Student Veterans</a></li>
  <li><a href="#">Guard &amp; Reserve</a></li>
</ul>

CSS：

ul {
  margin: 55px 1% 0 3%;
  width: 19%; //part of parent div
  padding: 0;
  float: left;
  display:block;
}
li {
  margin: 0;
  padding: 0 0 6px 0;
  position: relative;
  list-style: none;
  list-style-image: none;
}
a {
  display: inline-block;
  margin: 0;
  padding: 0 15px 0 0;
}

该代码没有什么特别之处，除了它在子导航的容器内，当点击父项时，slideDown（）（jQuery）。

Answer 1

看看改变li的高度是否有这样的差异，也为任何CSS添加边框，这将告诉你哪个元素不正确

li {
  margin: 0;
  padding: 0 0 6px 0;
  position: relative;
  list-style: none;
  list-style-image: none; height:30px; border:1px solid black;
}

如果它不是高度，那么尝试其他值，如顶部，底部边距和填充

用于测试的好页面在这里

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_height_width

Answer 2

位置：li标签中的相对位置导致li元素在iPad上相互重叠。