Safari中的CSS vw和高度100％

Question

很难格式化问题的好标题，因为只用几句话就无法解释。

高度为100％的元素和vw（视口宽度）固定高度的父元素在Safari上实际上并不是100％高（Mac Mavericks，不确定Windows）。它是0。

我已准备好pen with example来证明我的问题。使用Chrome时，内部元素的正确高度为100％。使用Safari（v7.0.2（9537.74.9）），内部元素的高度为0。

编辑：在使用iOS 7.1的iPhone上发生同样的错误

Answer 1

这是Safari 7中vh和vw的已知错误。您可以通过在height: inherit元素上设置#child来解决此问题：

#parent {
  width:100%;
  height:50vw;
  background: red;
}

#child {
  width: 100%;
  height: inherit;
  background: lime;
}

updated pen

在Safari 8中，此错误已得到修复，百分比高度/宽度应该可以正常工作。