如何克服 CSS calc() 函数无效属性值，但在检查器中输入相同代码时有效？

Question

我在 .scss 文件中有以下代码：

.device_content_div {
    width: calc(100% – 169px);
    margin-left: 204px;
  }

它由 Gulp 处理。当我在 Chrome 检查器中打开相关页面时，它收到无效属性警报。

但是，当我在检查器中手动键入完全相同的代码时，没有任何警报，并且代码正常运行。

Firefox 和 Safari 也是如此。我曾尝试将其添加为 html 页面本身的插入内容，并作为 'unprocessed' 普通 .css 文件添加，但同样的事情发生了。我已确保操作员和数字之间有空格，但无济于事。我真的被困在这里了。

怎么会发生这种情况，我该如何解决？

Answer 1

第一个看起来不像减号-。它有点宽。它实际上是一个 en dash 符号而不是 minus 符号。在此处检查 -> https://www.babelstone.co.uk/Unicode/whatisit.html 和 copy/paste 您使用的符号，然后写下减号 - 符号。

它们有不同的 unicode。 –（您使用的那个）是一个 EN DASH（您可以使用 ALT + 0150 来创建它）而这个 - 是一个 HYPHEN-MINUS {连字符或减号}。

我猜你 copy/paste 从某处获取了代码，你不小心插入了 en dash 而不是 minus。

应该是calc(100% - 169px) iso calc(100% – 169px)你可以看到符号的宽度略有不同

参见下面的示例

div {
  height:50px;
  background: red;
  margin: 10px 0;
}
div.first {
  /* EN DASH */
  width : calc(100% – 169px);
}

div.second {
  /* minus */
  width : calc(100% - 169px);
}

<div class="first">
  Not working ( EN DASH )
</div>
<div class="second">
  Working ( minus )
</div>

如何克服 CSS calc() 函数无效属性值，但在检查器中输入相同代码时有效？

How to overcome CSS calc() function invalid property value, but when typed in inspector same code does work?

css

sass

calc

gulp

如何克服 CSS calc() 函数无效 属性 值，但在检查器中输入相同代码时有效？

How to overcome CSS calc() function invalid property value, but when typed in inspector same code does work?

css

sass

calc

gulp

如何克服 CSS calc() 函数无效属性值，但在检查器中输入相同代码时有效？