我有这段代码
.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很多浏览器都不支持,我希望能够缩放。
最佳答案
一般来说,标准声明应该放在非标准/实验特性之后。
例如,在这种特殊情况下,它应该是:
.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
关于html - CSS: 如何在 IE9 中使用 vmin 单元?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29371072/