为什么压缩后的CSS在IE11下样式全乱了？

UX春景提问于 2026-02-05 11:51:28 阅读 47

优化

最近在用webpack的OptimizeCSSAssetsPlugin压缩CSS，结果发现打包后的样式在IE11里全乱了，其他浏览器没问题。明明开发环境不压缩的时候都正常…

尝试过在配置里加了canIUse: false和autoprefixer，但打包后的代码还是有transform属性被删掉了。看压缩后的文件，关键的媒体查询也被合并成这样：

@media only screen and (max-width:768px){.container{width:100%}header nav{flex-direction:column}}

原始代码是有换行和缩进的，压缩后变成密集的一行。怀疑是IE不识别简写属性？或者压缩工具配置哪里漏掉了兼容性选项？

我来解答赞 9 收藏

反馈

2 条解答

司空梓艺 Lv1

IE11对CSS的解析确实有点坑，尤其是压缩后的代码。你提到媒体查询被合并成一行，这可能是压缩工具默认行为导致的问题。另外，transform属性被删掉大概率是autoprefixer配置不对。

改一下就行，首先检查postcss的配置，确保autoprefixer的目标浏览器包含了IE11。比如这样：

module.exports = {

  plugins: [

    require('autoprefixer')({

      overrideBrowserslist: ['> 1%', 'last 2 versions', 'IE 11']

    })

  ]

};

然后在OptimizeCSSAssetsPlugin里调整压缩选项，强制保留换行和必要的空格，避免IE解析出问题。可以试试用cssnano来控制压缩行为：

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const cssnano = require('cssnano');



module.exports = {

  optimization: {

    minimizer: [

      new OptimizeCSSAssetsPlugin({

        cssProcessor: cssnano,

        cssProcessorOptions: {

          preset: ['default', {

            discardComments: { removeAll: true },

            normalizeWhitespace: false // 关键点，别让压缩工具把所有空格都干掉

          }]

        }

      })

    ]

  }

};

如果还是有问题，建议单独测试一下是不是flexbox相关的兼容性问题。IE11对flex-direction支持不太好，可能需要手动加前缀或者改写样式。实在不行，直接在HTML里加个meta标签强制IE用最新的渲染模式：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

最后提醒一句，IE11这种老古董，能不用就别用了，折腾起来真费时间。

2026-02-14 21:08

迷人的统元 Lv1

这个问题我之前也踩过坑，主要是压缩插件把IE11需要的一些特性给优化掉了。

OptimizeCSSAssetsPlugin 默认使用 cssnano 做压缩，而 cssnano 默认的压缩策略会把IE11还用着的一些属性删掉，比如 transform 这种，它以为IE11不支持，但实际上IE11只是支持得不太好。

你可以在配置里加一个 postcss 插件选项，在 postcss.config.js 里加：

module.exports = {

  plugins: {

    autoprefixer: {},

    'postcss-preset-env': {

      browserslist: ['ie >= 11']

    }

  }

}

然后 OptimizeCSSAssetsPlugin 的配置里加一句：

cssProcessorOptions: { preset: ['default', { discardComments: { removeAll: true } }] }

这样能保留部分IE11必须的关键属性。

还有一个问题是媒体查询的合并问题。webpack 把多个媒体查询合并成一个，IE11对这种密集写法识别有问题。你可以加一个 postcss 插件 postcss-discard-duplicates 来防止合并。

另外，flex-direction 在IE11下默认是不支持的，开发环境不压缩的时候能跑不代表IE11能正常解析，压缩后就更不可控了。建议你用 autoprefixer 的 browserslist 指定到IE11，让它加一下兼容性前缀。

如果你不想改配置，也可以考虑临时禁用压缩插件，或者用 CleanCSSWebpackPlugin 替代，它对IE11更友好。

2026-02-05 12:07