fixed会遮住正文是因为它脱离文档流，后续内容从视口顶部渲染；应给body设置box-sizing: border-box的padding-top（值等于通知条高度）来留出空间，并动态监听resize和字体加载更新该值。

页面顶端通知条必须用 position: fixed，其他定位方式在真实项目中基本不可靠——sticky 会被父级 transform、overflow 或 flex 布局干扰而失效；absolute 会随滚动消失；relative 根本不贴顶。

为什么 fixed 会遮住正文？怎么留出空间

这是 fixed 的正常行为：它脱离文档流，后续内容从视口顶部开始渲染，自然被盖住。不能靠 body { margin-top } 推内容（易触发 margin collapse，且 CMS 可能在 前插入节点导致失效）。

• 给 设置 padding-top，值等于通知条当前高度（比如 48px）
• 确保 body 已设 box-sizing: border-box，否则 padding 会撑高总高度，引发双滚动条
• 如果页面已有适配导航栏的 padding-top，新通知条高度要叠加计算，不能覆盖原有值
• 监听 window.resize 和字体加载完成事件（document.fonts.ready），动态更新 padding-top

关闭按钮点击后，DOM 怎么清理才真正消失

只设 display: none 或 visibility: hidden 是危险的：刷新后重显；残留 DOM 仍占据 fixed 层叠上下文，可能拦截下方按钮点击（尤其移动端）。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 点击关闭时，必须同步执行 element.remove()，彻底从 DOM 移除
• 立即调用 localStorage.setItem('top-banner-closed', 'true')，并用 try/catch 包裹（Safari 无痕模式会拒绝写入）
• 每个通知条需有唯一 id（如 id="ad-banner-2026-q4"），避免多实例时定时器或移除逻辑互相污染
• 不要用 hidden 属性——IE 不支持，且语义不符

小屏下文字换行错位、按钮被挤变形

根本不是字体大小或 padding 的问题，而是 flex 默认收缩行为在 Safari/旧版浏览器中不稳定导致的。

• 文字容器加 flex: 1; min-width: 0; white-space: nowrap; text-overflow: ellipsis;
• 关闭按钮加 flex-shrink: 0;，确保不被压缩
• 横向间距别用 gap（IE 和部分 Android WebView 不支持），改用 margin
• 小屏文案超长时，用 min-height + -webkit-line-clamp 控制行数，避免撑高破坏比例

最常被忽略的是：通知条必须带 role="alert"，否则屏幕阅读器不会播报；且 button 关闭控件不能用 span 模拟——这不仅是可访问性问题，也影响键盘焦点流和移动端点击热区。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！