怎样使用Less编写跨浏览器兼容的CSS三角形生成器-css教程-PHP中文网

ie11不支持less的& when语法，编译直接报错；必须拆为.triangle-up()等四个独立mixin，且border需显式声明四边、用transparent、带单位px，避免简写导致塌陷。

怎样使用less编写跨浏览器兼容的css三角形生成器

为什么直接写 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：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.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 计算