IE11不支持Less的& when语法，编译直接报错；必须拆为.triangle-up()等四个独立Mixin，且border需显式声明四边、用transparent、带单位px，避免简写导致塌陷。
为什么直接写 border 三角形在 IE11 会编译失败
Less 的 & when 条件编译语法在 IE11 兼容模式下不被支持——它不是运行时问题，而是 Less 编译器（尤其是旧版 less.js 或某些构建工具链）根本无法解析该语法，直接报错中断。这不是 CSS 兼容性问题，是预处理器层面的硬限制。
常见现象：项目在开发环境正常，但用 Webpack + less-loader@5.x 或旧版 Gulp-less 构建时，.triangle("up", 6px, #007bff) 报 ParseError: missing closing ')' or '}' 类错误，根源就是 & when 被当作了非法 token。
- 必须拆成四个独立 mixin，命名明确区分方向：
.triangle-up()、.triangle-down()、.triangle-left()、.triangle-right() - 每个 mixin 内部不再用条件判断，而是固定写死四边 border 声明
- 调用时不能传字符串方向参数，必须显式选择对应 mixin
如何避免 border 简写导致三角形塌陷
border: @size solid transparent 看似简洁，但它会重置所有四边的 border-style 和 border-color，后续再设 border-top-color: @color 时，其他三边可能继承父级 color 或 fallback 到 currentColor，破坏透明斜角交点。
真正安全的做法是显式声明全部四条边，且 style 统一为 solid：
立即学习“前端免费学习笔记（深入）”；
.triangle-up(@size, @color) {
width: 0;
height: 0;
border-top: @size solid transparent;
border-right: @size solid transparent;
border-bottom: @size solid @color;
border-left: @size solid transparent;
}
- 不依赖
border简写，杜绝 style/color 覆盖风险 - 四边都带单位（如
6px），@size: 6会导致border-top: 6 solid transparent，浏览器忽略无单位数值 - 透明边必须用
transparent，none、0、rgba(0,0,0,0)都不可替代
为什么三角形总在行内布局中偏移或留白
零宽高元素默认是 inline 级别，受父容器 line-height 和 vertical-align 影响，常出现底部空隙、上下飘移——这不是三角形本身画错了，是布局流没控住。
- 必须加
display: inline-block或display: block - 搭配
vertical-align: top或vertical-align: middle消除基线对齐干扰 - 建议额外加
font-size: 0和line-height: 0，防止某些老浏览器因行内默认字号撑开空间 - 若用于气泡箭头，父容器必须设
position: relative，三角本身用position: absolute定位，否则top/left会相对 viewport 计算
移动端响应式三角形该用 px 还是 em/rem
用 em 或 rem 做 @size 参数确实能随字体缩放，但风险在于：三角形视觉大小 ≈ @size × √2，而父级 font-size 变动时，这个比例并不线性可控——尤其在 iOS Safari 中，小字号下 0.3em 可能渲染为模糊像素或直接消失。
- 图标类三角（如下拉箭头、切换按钮）强烈推荐用
px，稳定、可预测 - 仅当三角形作为气泡框（tooltip）的一部分，且整个气泡需随文本流缩放时，才考虑
rem，并配合min-width: 4px防止过小不可见 - 绝对不要用
%或无单位数值，它们在 border-width 中无效
最易被忽略的一点：IE11 不仅不支持 & when，还对 rem 在 border 中的支持不稳定，所以跨浏览器场景下，px 是唯一零风险选择。
