边框被遮挡主因是父容器 overflow: hidden 裁剪或 margin 误用导致溢出；需检查 overflow 设置、改 margin 为 padding、排查层叠上下文干扰，并对 table 元素加 background-clip: padding-box。

边框被遮挡，通常不是边框本身出了问题，而是它所处的容器或父级元素“切掉”了它的显示区域。核心原因集中在两个地方：盒模型计算错误（比如 margin 误用）和 overflow 设置不当（比如 hidden 裁剪了内容）。只要定位准，改起来很快。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

检查父容器是否设置了 overflow: hidden

这是最常见的情况。当父元素设置了 overflow: hidden，它会严格裁剪掉所有超出 content + padding 区域的内容——包括绝对定位的子元素、伪元素生成的边框、甚至 table 的 background 边框。

• 如果边框是用 ::before/::after 伪元素模拟的（如移动端 1px 方案），overflow: hidden 会直接把伪元素“砍掉”
• 如果是原生 border 但出现在 <table> 或 <code><td> 上，在 Firefox 中还可能因 <code>background 覆盖导致边框不可见，此时要加 background-clip: padding-box
• 临时验证方法：给父容器加 overflow: visible !important，看边框是否立刻出现

确认是否用了 margin 而非 padding 来撑开空间

在某些布局中，开发者习惯用 margin 推开相邻元素，但 margin 属于盒外部，不占容器内部空间；而 overflow 的裁剪边界只认 content + padding。如果边框靠 margin “挤出来”，它其实已经处于被裁剪区之外。

• 把相关方向的 margin 改成 padding，边框就回到容器可视区域内
• 特别注意 flex / grid 容器中的子项，有时 margin 不触发重绘，但 padding 一定生效

排查定位元素与层叠上下文干扰

边框虽小，但如果它是某个 position: absolute 元素的一部分，而该元素又被祖先的 z-index 或 transform 创建了新的层叠上下文，就可能整体被压在底层。

立即学习“前端免费学习笔记（深入）”；

• 检查边框所在元素及其任意父级是否设置了 z-index、opacity 、<code>transform、filter 等会创建层叠上下文的属性
• 尝试给边框容器加 position: relative; z-index: 1;，快速测试是否受层叠上下文压制
• 若边框属于下拉菜单、弹窗等浮层，确保其父级没有 overflow: auto/scroll，否则浮层会被截断

补充：table 边框被 background 遮盖的专项处理

在 Firefox 中，<td> 或 <code><th> 若同时设了 <code>background 和 border，默认 background 会画到边框区域，把 border 盖住。

• 解决方式很简单：加上 background-clip: padding-box;
• 这样 background 就只铺在 padding 区内，border 才能正常显示
• 兼容性好，所有现代浏览器都支持