截图能指出“文章链接往下掉了”，却不能单独证明是哪个 CSS 规则导致。先固定页面、视口和菜单状态，再把视觉现象对应到 DOM 与样式。
可直接打开的教学页面
以下为专门构造的故障页面，不是本站线上导航。保存为 nav-demo.html，用浏览器打开。它在宽度恰好 1121 CSS 像素时故意将“文章”下移 14px；手机菜单还有展开、收起两种状态。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>导航错位教学页</title>
<style>
*{box-sizing:border-box}
body{margin:0;font-family:"Microsoft YaHei",sans-serif;color:#16324b;background:#f5f8fb}
header{display:flex;align-items:center;gap:24px;padding:20px 28px;background:white;border-bottom:1px solid #ccd8e0}
.brand{font-weight:700;font-size:22px;white-space:nowrap}
nav{display:flex;align-items:center;gap:24px;margin-left:auto}
nav a{display:block;padding:10px 8px;color:#12456a;text-decoration:none}
button{display:none;margin-left:auto;padding:10px}
main{max-width:760px;padding:24px;margin:auto}
@media (width:1121px){nav .articles{transform:translateY(14px)}}
@media (max-width:768px){
header{flex-wrap:wrap;padding:16px}
button{display:block}
nav{display:none;flex-basis:100%;margin:0;gap:8px;flex-wrap:wrap}
nav[data-open="true"]{display:flex}
}
</style>
</head>
<body>
<header>
<span class="brand">教学导航</span>
<button id="menu-toggle" aria-controls="nav" aria-expanded="false">菜单</button>
<nav id="nav" aria-label="主导航" data-open="false">
<a href="#home">首页</a><a class="articles" href="#articles">文章</a><a href="#help">帮助</a>
</nav>
</header>
<main><h1 id="home">从截图定位导航错位</h1>
<p id="articles">记录视口、元素位置和实际命中的规则，再修改。</p>
<p id="help">手机宽度时打开菜单，检查三个入口仍可点击。</p></main>
<script>
const button=document.querySelector('#menu-toggle'),nav=document.querySelector('#nav');
button.addEventListener('click',()=>{
const open=button.getAttribute('aria-expanded')!=='true';
button.setAttribute('aria-expanded',String(open));nav.dataset.open=String(open);
});
</script>
</body>
</html>
下图来自这份教学 HTML 的浏览器截图，展示同一视口下修复前后的状态。
这两张图只证明该教学样本，不代表真实站点其他页面也已检查。
用 DOM 证据判断是哪一条规则
在浏览器开发者工具把视口设为 1121，再在控制台执行：
console.table([...document.querySelectorAll('nav a')].map(a=>{
const r=a.getBoundingClientRect(),s=getComputedStyle(a);
return {text:a.textContent,top:r.top,height:r.height,transform:s.transform};
}));
预期“文章”的 top 比另两个链接高出数值 14，也就是视觉上向下 14px；transform 为 matrix(1, 0, 0, 1, 0, 14)。其他链接没有 transform。再在 Styles 面板临时取消那条媒体规则：如果当场对齐，就形成了从截图到规则的可复核证据。
“容器 align-items 错了”在此例不成立：三个链接高度相同，只有文章多了变换。不能为修一个子元素而把整个 header 再向上移动。
交给 Codex 的任务与最小 diff
读取 nav-demo.html，复现 1121px 的文章链接错位。
先记录视口、菜单状态、三个链接的 DOM 坐标和 computed transform，定位具体 CSS。
只删除造成单链接下移的规则，保留导航结构、文字、颜色和手机菜单行为。
修后测 1120、1121、1122、1024、390px；390 同时查菜单收起和展开、aria-expanded 与链接可点击。
给修复 diff、前后同尺寸截图、实际坐标与仍未检查范围。
本例预期 diff 只删除：
- @media (width:1121px){nav .articles{transform:translateY(14px)}}
修后桌面三个链接 top 应一致；手机收起时链接不显示，展开后才比较。不要把隐藏元素的零矩形纳入错位判断。
真页面复现不了时，先核对环境
截图可能来自旧构建、不同字体、缩放、登录状态或已展开菜单。记录实际 URL、CSS 版本、viewport 和 deviceScaleFactor，等待字体与图片稳定后重拍。Playwright 截图文档 区分视口截图、整页截图和元素截图；比较前后应保持同一种方式。
没有原 DOM 或无法访问页面时，Codex 只能提出定位假设，不能从一张图声称已找到真实 CSS。完整断点脚本见响应式回归练习。
下一步
继续阅读与你当前问题相关的教程：
