html - calc() CSS 属性如何在旧版浏览器中降级

标签 html css

考虑到 calc() CSS 属性与大多数浏览器兼容得很好(参见 http://caniuse.com/calc)我仍然想知道它在旧浏览器中的性能如何下降,尤其是在 Android 浏览器上,因为只有最新版本似乎才能很好地处理它.我不太关心 IE 支持。

这是一个比较笼统的问题,但这里有一个小例子 http://jsfiddle.net/7swVc/

我想知道这些属性将如何降低:

width:calc(100% - 50px);
height:calc(100% - 50px);

最佳答案

不支持 CSS3 calc 的浏览器将忽略出现无法识别的值的声明。这将与您从未将它们包含在 CSS 文件中一样。

在你的 fiddle 中,结果将是这样的:DEMO

当您使用 calc 时,您必须始终为不支持它的浏览器设置回退。所以你的 CSS 应该是这样的:

width: 600px;/*fallback for browsers dont use support calc*/
width: -webkit-calc(100% - 50px);
width: -moz-calc(100% - 50px);
width: calc(100% - 50px);

关于html - calc() CSS 属性如何在旧版浏览器中降级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25077292/

相关文章:

javascript - 单击提交表单后的 Ajax 请求

javascript - 导航栏 anchor 填充 div,WordPress 菜单

html - Bootstrap4 上的 hidden-sm-down 不起作用

html - 如何在html中对齐切片图像?

javascript - javascript改变可见性的元素不可点击

html - 沿对 Angular 线拆分为 3 个 div

javascript - 滑入菜单 - Canvas 外

javascript - 为什么这个网站无法在 Android 上加载?

css - Anchor 的背景图片不适用于 Safari/Firefox

html - 不使用 Javascript 显示/隐藏表格