html - CSS: 如何在 IE9 中使用 vmin 单元？

Question

我有这段代码

.image.medium {
    width:10vmin;
    height:10vmin;
}

.image.small {
    width:6vmin;
    height:6vmin;
}

.image.medium.as_big {
    margin:5vmin;
}

.image.small.as_big {
    margin:7vmin;
}

因为您可以看到它包含那些“vmin”单位，这些单位在 IE9 上没有用，因为它使用“vm”。

我的电脑上没有 IE，想检查一下，反正它是一台 linux 电脑，所以我不知道如何让这个 css 可以被 IE9 和其他浏览器使用。

我也在想，我应该改用 javascript 解决方法吗？根据 http://caniuse.com/#feat=viewport-units，我只想要 vmin很多浏览器都不支持，我希望能够缩放。

Answer 1

一般来说，标准声明应该放在非标准/实验特性之后。

例如，在这种特殊情况下，它应该是:

.image.medium {
    width: 10vm;   /* fallback for IE9 */
    width: 10vmin;

    height: 10vm;  /* fallback for IE9 */
    height: 10vmin;
}

后一个声明由支持 vmin 的现代网络浏览器解释。前一个声明作为后一个声明的后备。

---

跨浏览器解决方案

还有用于视口(viewport)相对长度的 polyfill，例如:

• vminpoly作者:Sebastian Ferreyra — CSS 单元 vw、vh 和 vmin 的 polyfill。
• Prefixfree - Viewport Relative Units Plugin通过 Lea Verou — A polyfill对于 vw、vh 和 vmin。
• Viewport Units Buggyfill作者:Rodney Rehm — 适用于 Mobile Safari 的视口(viewport) vh、vw vmin、vmax 的 polyfill。
• Is there any cross-browser javascript for making vh and vw units work