css – calc(xx％ – yypx)不起作用,我没有忘记空格

2024年1月9日 322次阅读

我有以下css：

#elementid {
  width: -webkit-calc(100% - 30px);
  width: -moz-calc(100% - 30px);
  width: -o-calc(100% - 30px);
  width: calc(100% - 30px);
}

该元素比预期的要窄.在Chrome中,如果我检查元素,它会显示：

width: -webkit-calc(70%);
width: -moz-calc(70%);
width: -o-calc(70%);
width: calc(70%);

所以它显然将’px’解释为％.

但是如果我在元素中输入完全相同的CSS内联,在Chrome开发工具中：

width: calc(100% - 30px);

…然后它按照我的预期呈现.

正如您所看到的,我在运算符周围添加了正确的空间,所以不是这样.

为什么浏览器在渲染页面时将其解释为“calc(70％)”,而不是在使用开发工具更改CSS内联时？

最佳答案

Some browsers accept additional proprietary non-standard non-css
syntax on top of the usual css. Less is build on top of standard css
and therefore may not recognize it. You may also need to put an
otherwise non-parseable value inside a variable and use it to
dynamically build selector or other css part during compilation time.

Escaping allows you to use any arbitrary string as property or
variable value. It can be used also to dynamically build selectors,
but that feature is deprecated and replaced by different more powerful
option.

Use either ~”whatever” or ~’whatever’ syntax to escape property
values. Anything between quotes is used as is with almost no changes.
The “as is” rule has one exception: string interpolation works with
the usual @{variableName} syntax.

所以宽度：〜’计算(100％ – 30px)’;

否则LESS将首先在括号内进行数学运算. LESS有一个“严格数学”设置可以解决这个问题.

查看这个惊人的答案以获取更多信息Disable LESS-CSS Overwriting calc()

点赞