在JavaScript中使用CSS calc()混合单位的IE渲染问题

嘿，我来帮你排查这个问题！你在IE里遇到的left样式不生效的问题，主要是代码里的calc写法出了问题，还有IE本身对calc的严格要求，咱们一步步来解决：

1. 找出代码里的语法错误 #

你写的这行代码有三处明显问题：

tab2.style.left = 'calc(~"200px+40vw")px';

• ~"是Less/Sass这类预处理器的语法，但你这里是原生JavaScript直接设置行内样式，完全不需要这个，这会让IE无法识别calc的内容。
• 最后多出来的px后缀完全多余，会让整个left属性值变成无效格式，浏览器自然会忽略它。
• 另外，IE对calc里的运算符有严格的空格要求，+前后必须加空格，否则也会不识别。

2. 修正后的正确代码 #

把代码改成下面这样，就能在IE9+里正常生效了：

var tab3 = document.createElement('div');
tab3.className = 'tab';
tab3.style.display = 'none';
// 修正left属性的calc写法
tab2.style.left = 'calc(200px + 40vw)';

3. 兼容更早IE版本的方案 #

如果你的项目需要兼容IE8及以下，那要注意：IE8既不支持calc，也不支持vw单位，这时候得换个思路——动态计算出对应的像素值：

var tab3 = document.createElement('div');
tab3.className = 'tab';
tab3.style.display = 'none';

// 计算视口宽度的40%，加上200px
var viewportWidth = document.documentElement.clientWidth;
var leftValue = 200 + (viewportWidth * 0.4) + 'px';
tab2.style.left = leftValue;

这种方式通过原生JS计算出具体的像素值，能在所有IE版本里生效。

最后别忘了确认tab2是已经存在于DOM中的元素，不然就算写法正确，样式也不会应用上去哦～

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