CSS3 calc()在最新的chrome不工作

前端之家收集整理的这篇文章主要介绍了CSS3 calc()在最新的chrome不工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我注意到我使用CSS3 calc()函数作为宽度的单位在最新版本的Chrome不工作。

在Chrome开发人员工具中,带有calc()的规则有一个删除线,并在其左侧的黄色三角形中有一个感叹号。这表示属性或值未被识别。

如何让它在现代浏览器中工作?因为它是一个值而不是属性,供应商前缀在哪里去?

更新:

当我说它不工作,我的意思是Chrome开发工具是说它不能识别我的用法它的宽度:calc(100%-88px);我怎么知道它不认识它?因为chrome开发工具中的样式规则旁边有删除线和黄色三角形图标。

更新2:

这里是我在Chrome开发工具中看到的截图:http://cl.ly/image/2g3W1l2u022e

解决方法

问题的问题是由减法运算符周围空间不足引起的。

Note that the grammar requires spaces around binary ‘+’ and ‘-’
operators. The ‘*’ and ‘/’ operators do not require spaces.

http://www.w3.org/TR/css3-values/#calc§8.1.1

我推测这是为了澄清运算符和有符号数字之间的区别。

差:calc(100%-88px)
良好:calc(100% – 88像素)

How do I know it is not recognizing it? Because of the strikethrough
and the yellow triangle icon next to the style rule in chrome dev
tools.

在Chrome的开发人员工具中查看的属性可能有效,但会被覆盖;然而,一个属性被打破,并且旁边有一个警告三角形图标是无效的。

其他注意事项

> Chrome已支持calc()为quite some time(在OSX和Windows上确认)。
> Chrome may not support viewport units如calc()中的vh / vw。截至2014年底,有实施这项活动,但the related bug仍然开放。>在我的测试中,Safari将在OSX而不是Windows上支持带-webkit供应商前缀的calc()。> IE9支持没有供应商前缀的calc()。> FF支持没有供应商前缀的calc()。

猜你在找的CSS相关文章