Less中.clearfix等Mixin不生效，因Less仅做语法转换而不解析CSS语义，厂商前缀需显式调用Mixin或集成Autoprefixer；手写flex()需分IE10旧语法（-ms-flexbox）与现代标准，且属性须配对；Autoprefixer须在Less编译后通过构建工具接入。
Less里用.clearfix这类Mixin时，为什么加了却没生效？
因为Less本身不解析CSS语法语义，.clearfix只是普通Mixin，它不会自动识别你写的是display: flex还是transform，更不会主动补厂商前缀。所谓“自动补全”，必须显式调用带前缀逻辑的Mixin，或借助插件。
常见错误是把原生CSS写法直接塞进Less文件，比如：
.box {
display: flex;
transform: rotate(45deg);
}
这段代码在Less中编译后仍是原样输出，flex和transform在IE10、Android 4.3等环境会直接失效。
- Less编译器只做变量替换、嵌套展开、Mixin调用，不做CSS兼容性分析
- 所有前缀必须由开发者声明逻辑，或引入第三方工具链（如Autoprefixer）
- 手写Mixin补前缀时，要覆盖目标浏览器的实际支持情况，不能凭印象写
-webkit-就完事
怎么写一个可靠的flex() Mixin来兼容IE10+
IE10只支持-ms-flexbox（旧语法），而现代浏览器用display: flex。二者行为不完全等价，所以不能简单叠加写死——得按场景分条件输出。
立即学习“前端免费学习笔记（深入）”；
推荐写法（支持IE10+、Safari 6.1+、Chrome 21+）：
.flex(@dir: row) {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: @dir;
flex-direction: @dir;
}
// 使用
.container {
.flex(column);
}
-
display: -ms-flexbox触发IE10/11的旧引擎，display: flex覆盖现代标准 -
-ms-flex-direction必须配对display: -ms-flexbox，单独写无效 - 不要给
flex-wrap、justify-content等属性硬加-webkit-，它们在IE中压根不支持，加了反而污染样式表
Autoprefixer比手写Mixin更靠谱，但Less里怎么接入？
Less官方不内置Autoprefixer，必须在构建阶段集成。直接在Less文件里写// autoprefixer: last 2 versions注释是无效的。
- Webpack用户：用
postcss-loader+autoprefixer，把Less编译结果交给PostCSS处理 - 命令行用户：
lessc style.less | postcss --use autoprefixer --no-map > style.css - 注意顺序：Autoprefixer必须在Less编译之后运行，否则它看不到最终生成的
display: flex - 配置项示例：
{"browsers": ["> 1%", "IE >= 10"]}，避免为iOS 6这种已淘汰环境加无谓前缀
transform类属性最容易漏掉哪些前缀？
不是所有transform都需前缀，也不是所有浏览器前缀都一样。比如transform: scale(1.2)在Safari 8以下必须加-webkit-，但transform: translateZ(0)在Android 4.1需要-webkit-，而rotateX()在旧Chrome里甚至要-webkit-transform-style: preserve-3d配合。
安全写法（兼顾性能与兼容）：
.rotate(@deg) {
-webkit-transform: rotate(@deg);
-ms-transform: rotate(@deg); // IE9
transform: rotate(@deg);
}
// 避免这样写（IE9不支持transform-origin）
.origin-center {
-webkit-transform-origin: center;
transform-origin: center; // IE10+才支持，IE9会忽略整条规则
}
-
-ms-transform仅IE9支持，IE10+应优先用标准transform -
transform-style、perspective等3D相关属性前缀混乱，建议用Autoprefixer统一处理 - 移动端调试时，用
chrome://inspect连真机，看Computed面板里最终生效的是哪条声明，比猜前缀更准
真正麻烦的从来不是写几个-webkit-，而是不同前缀背后对应着不同的渲染引擎行为差异。比如-webkit-flex和flex在子项默认min-width处理上就不一致，这时候光补前缀解决不了问题。
