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

通常,标准声明应放在非标准/实验性功能之后.

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

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

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

后一种声明由现代网络浏览器支持解释vmin.前一个声明是后者的后备.

跨浏览器解决方案

视口相对长度也有polyfill,例如:

• semintian Ferreyra的vminpoly - 用于CSS单元的polyfillvw,vh&vmin.
• Prefixfree -视口相对单位插件由利·贝罗-一个填充工具的vw,vh和vmin.
• 视口单位Buggyfill罗德尼-雷姆-一种视填充工具vh,vw vmin,vmax对于移动Safari浏览器.
• 是否有任何跨浏览器的JavaScript用于使vh和vw单元工作