calc() 不适用于 Internet Explorer/Microsoft Edge 中的转换答案

【问题标题】：calc() not working with transform in Internet Explorer/Microsoft Edgecalc() 不适用于 Internet Explorer/Microsoft Edge 中的转换
【发布时间】：2018-04-24 17:36:59
【问题描述】：

我正在尝试将 div 缩放等于 1/2.9 的量。我可以将它输入为小数，但它不会像分数那样准确。

此代码适用于 IE 和 Chrome：

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

&lt;div class="container"&gt;&lt;/div&gt;

但是，calc() 只能在 Chrome 中使用：

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

&lt;div class="container"&gt;&lt;/div&gt;

IE 只是忽略了我的calc(1/2.9)。它不会缩放容器。

我可以做些什么来让 IE 正确呈现calc()？

【问题讨论】：

developer.microsoft.com/en-us/microsoft-edge/platform/issues/…
没有。也许在 2034 年，忍受它。两种选择：只为 ie 用户（主要是：工作场所和奶奶电脑）为每个人复杂化你的代码，或者根本不使用 css 转换。
某位智者曾告诉我：“支持 IE，注定失败。”其实那是我……
@Temani Afif，这不是解决方案。我正在建立一个网站。我的一些访问者将是 IE 用户。
对于任何会看到这个问题的人来说，这是一个潜在的解决方案；）并相信这是唯一的解决方案......但如果你仍然想强迫 IE 理解事情，祝你好运:) 但不要不要浪费很多时间

标签： css internet-explorer microsoft-edge css-transforms css-calc

【解决方案1】：

没有。由于您在这里甚至没有使用动态值执行算术运算，因此请帮自己一个忙并将比率硬编码到小数点后三位。小数点后三位就是您需要的所有精度，即使考虑到高分辨率设备显示也是如此。

【讨论】：