Avada 页面出现 2px 意外边框？排查 WordPress block-library CSS 选择器冲突
一个 Avada + Fusion Builder 搭的站，页面上用了三列网格布局。用 Chrome DevTools 选中 .fusion-layout-column 元素的时候，Computed 面板显示这个元素有 2px 的边框。
但诡异的是，Styles 面板里没有任何一条规则显式设置过 border-width: 2px。
一开始以为是 Avada 边框变量的问题
Avada/Fusion Builder 会在 .fusion-layout-column 的行内样式里写一组 CSS 自定义属性来控制边框：
--awb-border-color:#dcdcdc;
--awb-border-right:1px;
--awb-border-bottom:1px;
--awb-border-style:solid;
同时，Avada 的动态 CSS 里有针对子元素 .fusion-column-wrapper 的边框规则：
.fusion-layout-column .fusion-column-wrapper {
border-width: var(--awb-border-top) var(--awb-border-right)
var(--awb-border-bottom) var(--awb-border-left);
border-color: var(--awb-border-color);
border-style: var(--awb-border-style);
}
不过这是子元素的边框，宽度 1px，跟 2px 对不上。
我把页面全部 1.29MB 的 Avada 内联 CSS 下载下来分析了一遍，发现 .fusion-layout-column 本身的 border 规则只有两条：
.fusion-layout-column,
.product-buttons,
.product-buttons-container,
.products li .fusion-product-wrapper {
border-color: var(--timeline_color);
}
.fusion-layout-column,
.avada-has-transparent-timeline_color .product-buttons {
border: none;
}
Avada 明明写了 border: none。也就是说，这 2px 边框不是主题来的。
真正的元凶：block-library 的属性选择器
接着把页面上所有 CSS 文件都扫了一遍，在 WordPress 核心文件 /wp-includes/css/dist/block-library/common.min.css 里找到了这条规则：
html :where([style*=border-color]) {
border-style: solid;
}
这条规则从 WordPress 5.9 就有了，目的是让古腾堡编辑器里设置了边框颜色的块元素能正常显示边框。
问题就出在 [style*=border-color] 这个子字符串匹配上。Avada 在 .fusion-layout-column 的行内 style 属性里写了 --awb-border-color:#dcdcdc，属性值里含 border-color 这几个字，选择器就命中了这个元素。
这条规则只设了 border-style: solid，border-width 和 border-color 都没动。按 CSS 规范，border-width 的初始值是 medium，Chrome 里计算出来就是 2px；border-color 的初始值是 currentColor，所以显示成当前文字颜色。
因果链是这样的：
- Avada 在
.fusion-layout-column的行内样式中定义了--awb-border-color（CSS 变量） - WordPress block-library 的
[style*=border-color]通过子字符串匹配命中该元素 - 规则应用
border-style: solid - 浏览器用默认值
medium（2px）作为边框宽度，currentColor（当前文字色）作为边框颜色
修复
自定义 CSS 里加一条规则就能解决：
.fusion-layout-column {
border: 0;
}
如果遇到优先级问题，就用更具体的选择器：
.fusion-layout-column.fusion_builder_column {
border: 0 !important;
}
这条修复只移除 .fusion-layout-column 本身的意外边框，不影响 Avada 在子元素 .fusion-column-wrapper 上设置的网格分隔线。
总结
这个问题的根源，是两个 CSS 特性之间的意外交互：
- WordPress block-library 用了宽泛的属性选择器
[style*=border-color] - Avada 在行内样式中使用了以
border-color结尾的 CSS 自定义属性名
类似的误匹配还会发生在 [style=border-width]（匹配 --awb-border-width）和 [style=border-radius]（匹配 --awb-border-radius）上。用 CSS 自定义属性、且属性名里带这类关键词的时候，就要留意这种跨框架的样式冲突。
排查日期：2026-05-29 | 首发于 tudoudaily.com
