在safari上的相对百分比定位意外结果

Question

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

我有两个锚点包含在两个锚点中，它们左右浮动一个。 它们有一个固定的高度，我希望它们垂直居中，所以我使用top:50%; margin-top:-25px（高度的一半）

我认为问题是因为一旦.labels＆gt;的内容设置了顶部容器div.drawer就没有固定的高度。 ul被清除（li向左浮动）

css中的重要线条是顶部容器高度线＃7（目前为自动） 和＃51 - 52

号线上的跨度定位

如果我给div.drawer一个固定的高度（＃7中的评论），它就会按照您的预期运作; 但是当浮动内容被清除时我会期望自动高度工作，它在所有浏览器中我已经测试了除了iOS上的safari 。

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

Answer 1

使用position：absolute，left：0，right：0，top：0，bottom：0;创建100％高度和宽度元素。我用添加的定位分叉你的小提琴。

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

}

http://jsfiddle.net/hYmpa/

我不确定为什么在iOS高度下：100％的操作与桌面操作不同。