css - safari ios 意外结果上的相对百分比定位

Question

我在 iOS 上使用 safari 时遇到问题，当容器的高度由 float 内容确定时，相对定位的对象无法正确观察其容器的框。

我有两个 span 包含在 2 个 anchor 中，它们分别向左和向右浮动。它们有固定的高度，我希望它们垂直居中，所以我使用 top:50%; margin-top:-25px(高度的一半)

我认为问题是因为顶部容器 div.drawer 没有固定高度，它是在 .labels > ul 的内容被清除后设置的(li 向左浮动)

css 中的重要行是顶部容器高度行#7(当前为自动)以及跨度在第 51 - 52 行的定位

如果我给 div.drawer 一个固定的高度(#7 中的注释)，它会如您所愿地工作；但是我希望自动高度在 float 内容被清除时起作用，它在所有浏览器中都有效我已经测试过 iOS 上的 safari 除外。

例子 http://jsfiddle.net/robaldred/ANXsK/

Answer 1

使用position: absolute, left: 0, right: 0, top: 0, bottom: 0;创建一个 100% 高度和宽度的元素。我用添加的定位 fork 了你的 fiddle 。

.drawer .nav {
    position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;

http://jsfiddle.net/hYmpa/

我不确定为什么在 iOS height: 100% 下的操作与在桌面上的操作不一样。