IE及Microsoft Edge中transform结合calc()无法生效的技术咨询

我最近在做元素缩放时遇到了一个兼容性小问题：我需要把一个div按1/2.9的比例缩放，虽然用小数也能实现，但分数形式的精度明显更高。下面是两种写法的兼容性差异：

兼容IE和Chrome的写法 #

这段代码直接用计算好的小数作为scale参数，在IE和Chrome里都能正常运行：

.container { 
  position: absolute; 
  width: 200px; 
  height: 290px; 
  transform: scale(0.3448275862068966); 
  background: #F00; 
}

<div class="container"></div>

仅支持Chrome的calc()写法 #

如果用calc()直接写分数表达式，就只有Chrome能正常识别，IE完全不生效：

.container { 
  position: absolute; 
  width: 200px; 
  height: 290px; 
  transform: scale(calc(1/2.9)); 
  background: #F00; 
}

<div class="container"></div>

本质原因是IE的CSS解析器不支持在transform: scale()的参数中使用calc()计算表达式，而Chrome等现代浏览器已经支持这个特性。如果需要兼容IE，还是得提前计算好精确的小数数值来使用。

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