父级不调整相对于子元素的宽度

Question

在Safari中，当使用动态vw CSS单位表示宽度和高度时，父元素（没有指定的尺寸）不会将自身调整为子元素的宽度尺寸。下面是一个小提琴和一些屏幕截图：

http://jsfiddle.net/gby3N/

此问题的任何想法或解决方法？

Answer 1

我在Safari 7.0.4中有相同的行为，我能想到的唯一解释是它是一个Safari bug。这很奇怪，因为我只能找到人们谈论iOS Safari有问题 - 没有关于桌面Safari。

幸运的是，在https://github.com/rodneyrehm/viewport-units-buggyfill处修复iOS Safari对视口单元的处理的“buggyfill”似乎也适用于此。我只需要添加

<script src="https://rawgit.com/rodneyrehm/viewport-units-buggyfill/master/viewport-units-buggyfill.js"></script>
<script>window.viewportUnitsBuggyfill.init(true);</script>

让parent伸展到适合child的Safari。请注意，我使用了init(true)而不仅仅是init()，它会检查iOS用户代理。

演示：http://jsfiddle.net/gby3N/2/

您也可以选择只将min-width: 12vw;添加到父元素。 （12vw是子元素的宽度。）