CSS calc()属性值无效，但浏览器控制台输入同代码却生效的解决办法

哈哈，这个细节坑我之前也栽过！问题的核心其实特别隐蔽——你写在calc()里的减号不是CSS认可的英文半角减号（-），而是中文全角破折号（–）！

为什么会出现这种情况？ #

• 肉眼几乎没法区分这两个符号，但浏览器对CSS语法的识别非常严格，全角破折号不属于合法的算术运算符，所以会判定为「无效属性值」
• 你手动输入时用的是英文半角减号，自然能正常生效；但代码里的符号是全角的，不管是Gulp处理、直接嵌HTML还是用纯CSS文件，浏览器都认不出来

解决步骤 #

1. 把代码中的–（全角破折号）替换成-（英文半角减号，就是你键盘数字键0右侧的那个符号）
2. 修正后的代码应该是：

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

3. 后续写代码时尽量注意输入法状态，避免不小心切换到中文全角模式输入运算符；如果是复制粘贴的代码，一定要检查标点和运算符的格式

内容的提问来源于stack exchange，提问作者Christian