如何替换CSS中的*zoom:1等写法以消除yarn build语法警告？

这些带*的CSS语句是IE6/7专属的兼容hack，现代CSS解析器（比如PostCSS、css-loader）会将其识别为语法错误，从而触发构建警告。以下是几种可行的替换/修复方案：

方案1：直接移除（推荐，无需兼容旧IE） #

如果你的项目不需要支持IE6/7，直接删除这些*开头的语句即可，这是最简洁的解决方式。

示例：
原代码：

.box {
  width: 200px;
  *display: inline;
  *zoom: 1;
}

修改后：

.box {
  width: 200px;
}

方案2：保留兼容但规避语法错误 #

如果仍需兼容IE6/7，可通过以下方式避免构建警告：

• 单独分离旧IE样式：在HTML中通过IE条件注释加载专属样式文件，将*display、*zoom这类hack放到单独的CSS文件中，主样式文件使用标准语法。
  示例HTML：

  <!--[if lte IE 7]>
  <link rel="stylesheet" href="./styles/ie-old.css">
  <![endif]-->
  

  ie-old.css中保留hack代码，构建工具不会将其纳入主编译流程，自然不会报错。

• 使用PostCSS插件兼容：安装postcss-ie-hack插件，让构建工具识别并保留这些IE hack，同时不触发语法警告。

  1. 安装插件：

     yarn add postcss-ie-hack --dev
     

  2. 在postcss.config.js中配置：

     module.exports = {
       plugins: [
         require('postcss-ie-hack')
       ]
     }
     

方案3：用现代语法替代原hack效果 #

原*zoom: 1是用来触发IE6/7的hasLayout机制，*display: inline是模拟inline-block的效果（IE6/7不支持块级元素的inline-block）。现代浏览器中直接使用标准语法即可：

示例：
原hack实现的行内块效果：

.item {
  *display: inline;
  *zoom: 1;
}

现代替代写法：

.item {
  display: inline-block;
}

如果需要兼容IE8，IE8已支持inline-block，无需额外hack。

内容的提问来源于stack exchange，提问作者Muhammad Tahir Qaiser