css中的“var`”在IE中不起作用

在 Internet Explorer 浏览器（IE）中，CSS 自定义属性（也称为 CSS 变量）是不受支持的，这就是为什么使用 var() 函数设置 CSS 变量在 IE 浏览器中不起作用的原因。CSS 变量是一个相对较新的特性，IE 浏览器没有跟上 Web 标准的发展，因此不支持这一特性。

然而，你可以使用一些替代方法在 IE 浏览器中实现类似的功能（变量）。以下是一些建议：

1. 使用 PostCSS 插件

对于构建流程中的 CSS，可以使用 PostCSS 插件，比如 postcss-custom-properties ，将 CSS 变量转换为包含静态值的 CSS。这样，转换后的 CSS 可以在 IE 浏览器中正常工作。

为了使用这个插件，你需要安装它并将其添加到你的构建流程中：

shnpm install postcss-custom-properties --save-dev

然后，在你的 PostCSS 配置中添加这个插件：

javascriptconst postcssCustomProperties = require('postcss-custom-properties');

module.exports = {
  plugins: [
    postcssCustomProperties(/* options */)
  ]
};

2. 使用 JavaScript 做后备

针对简单场景，你可以用一些 JavaScript 或 jQuery 添加后备方案。例如，可以利用一些库例如 Modernizr 检测浏览器对 var() 支持程度。

javascriptif (!Modernizr.cssvariables) {
  // 使用 jQuery 或其他库进行 CSS 变量的后备方案
  $('html').css('font-size', '16px'); // IE */ 
  $('html').css('--font-size', '16px'); // 其他现代浏览器
}

结合这些后备方案确保 CSS 变量在 IE 浏览器和其他现代浏览器中都能正常工作，实现跨浏览器兼容。

3. 使用 CSS 预处理器

另外一种选项是使用像 Sass 或 Less 这样的 CSS 预处理器。它们允许你使用变量来定义和重复值。虽然这并不能完全替代 CSS 变量，但可以在 IE 浏览器中避免 var() 不被支持的问题。

例如，在 Sass 中：

scss$font-size: 16px;

body {
  font-size: $font-size;
}

总之，虽然 CSS 变量在 IE 浏览器中不受支持，但你可以使用一些方法来提高浏览器的兼容性。