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 解决方法吗？我只想要 vmin，根据 http://caniuse.com/#feat=viewport-units 很多浏览器不支持它，我希望能够缩放。

Answer 1

一般来说，标准声明应该放在 non-standard/experimental 特性之后。

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

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

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

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

跨浏览器解决方案

还有针对视口相对长度的 polyfill，例如：

vminpoly by Sebastian Ferreyra — CSS 单元 vw、vh 和 vmin.
Prefixfree - Viewport Relative Units Plugin by Lea Verou — A polyfill 表示 vw、vh 和 vmin。
Viewport Units Buggyfill 作者 Rodney Rehm — 用于视口 vh、vw vmin、vmax 的 polyfill for Mobile Safari。
Is there any cross-browser javascript for making vh and vw units work

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

CSS: How to use vmin unit in IE9?

html

css

internet-explorer

跨浏览器解决方案