CSS3属性缺少厂商前缀会导致浏览器兼容性问题，解决方案包括：一、手动添加-webkit-、-moz-、-ms-、-o-前缀；二、用Autoprefixer自动化补全；三、引入normalize.css和prefixfree.min.js；四、确保带前缀属性位于标准属性之前。
如果您将PSD设计稿切图并编写为HTML5页面后，在部分浏览器中出现样式错乱、动画失效或布局异常，很可能是由于CSS3属性缺少浏览器厂商前缀导致解析失败。以下是针对该问题的多种前缀补全方案：
一、手动添加标准前缀
在CSS中对特定属性显式声明各主流浏览器的私有前缀，确保旧版浏览器（如Chrome 25以下、Safari 6.1以下、Firefox 15以下）能识别新特性。该方法控制精准，但维护成本较高。
1、定位到CSS文件中使用了transform、transition、animation、border-radius、box-shadow等CSS3特性的选择器。
2、在对应属性前依次添加-webkit-、-moz-、-ms-、-o-前缀，标准属性写在最后。
立即学习“前端免费学习笔记（深入）”；
3、例如：将transform: rotate(45deg);改为：-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);
4、对@keyframes规则同样处理：使用@-webkit-keyframes、@-moz-keyframes等，并在调用animation时同步指定带前缀的名称。
二、使用Autoprefixer自动化补全
Autoprefixer基于Can I Use数据，根据目标浏览器范围自动注入所需前缀，避免手动遗漏或冗余。无需修改源码结构，适配现代构建流程。
1、在项目中安装Autoprefixer：执行npm install autoprefixer --save-dev（需已安装PostCSS）。
2、创建postcss.config.js文件，配置如下：module.exports = { plugins: [ require('autoprefixer')({ overrideBrowserslist: ['> 1%', 'last 2 versions', 'iOS >= 8'] }) ] };
3、在构建脚本（如webpack、Gulp或CLI命令）中集成PostCSS处理CSS输入文件。
4、编译后生成的CSS将自动包含-webkit-、-moz-等必要前缀，不输出已淘汰浏览器（如IE8）的无效前缀。
三、引入CSS重置与兼容性库
通过加载经过验证的兼容层CSS文件，统一修复常见渲染差异，尤其适用于未使用构建工具的静态页面项目。
1、下载normalize.css最新版，将其置于项目CSS目录并引入HTML的中。
2、添加prefixfree.min.js（轻量级运行时前缀补全脚本），放在前：
3、在HTML中插入：<script src="js/prefixfree.min.js"></script>。
4、该脚本会在页面加载时动态扫描CSS规则，为支持的属性实时注入-webkit-等前缀，无需修改原始CSS代码。
四、调整CSS属性书写顺序
部分浏览器（尤其是旧版Android Webview和Safari）要求带前缀的属性必须位于标准属性之前，否则会被忽略。错误顺序会导致前缀失效。
1、检查所有CSS规则中同一属性是否出现多次，确认带前缀版本排在标准版本之前。
2、删除重复的标准属性行，仅保留一份标准写法作为最终声明。
3、例如：正确顺序为-webkit-transition: all 0.3s; transition: all 0.3s;；错误顺序为transition: all 0.3s; -webkit-transition: all 0.3s;。
4、特别注意flex相关属性：-webkit-box、-webkit-flex、-ms-flexbox、flex必须严格按此顺序排列。
