最近我开始在CSS中使用calc(…)方法。我很快了解到,代码如:width:calc(100%-2)将不工作,虽然在 – 操作符之前和之后添加空格将修复问题,并且calc方法将正常工作。
做了一点研究后,我发现多个博客文章引用白空间是必需的,许多甚至指向规范(CSS3 8.1.1),其中规定:
In addition,whitespace is required on both sides of the + and –
operators. (The * and / operaters can be used without whitespace
around them.)
现在,显然,规范告诉我们,这些运算符必须包装在空白,但为什么?我已经阅读了规范(通过8.1.2-4),如果它在这些额外的部分解释,我不明白的推理。
简单来说,有人可以解释为什么指定calc(100%-1)或甚至calc(100%/ 2)是可接受的语法,但不是calc(100%-1)?
解决方法
– 字符是CSS idents中允许的字符之一。根据给定的
here的决议,似乎他们想防止可能出现的句法模糊,没有空格,特别是关键字值,如最小内容(虽然AFAIK关键字值不允许在calc() – 纠正我如果我错了)。
Not everyone agrees与这个决议,虽然。