css - Safari 中的 CSS vw 和高度 100%

Question

想出一个好的题目真的很难，因为不是几句话就能解释的。

高度为 100% 且父级在（视口宽度）中具有固定高度的元素vw在 Safari 上实际上并不是 100% 高（Mac Mavericks，不确定 Windows）。是 0。

我已经准备了一支笔来展示我的问题。使用 Chrome，内部元素的正确高度为 100%。对于 Safari (v7.0.2 (9537.74.9))，内部元素的高度为 0。

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

Answer 1

vh这是 Safari 7中的一个已知错误。您可以通过设置元素来vw修复它：height: inherit#child

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

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

更新的笔

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