标签已彻底失效，必须用css动画替代：父容器设overflow:hidden，文本用white-space:nowrap和translatex(100%)→translatex(-100%)，动态内容需js重算宽度并重设动画时长。
<marquee></marquee> 标签在所有现代浏览器中已完全失效，2026 年 Chrome/Firefox/Safari 均不解析其 behavior、direction、scrollamount 等属性，硬写进去只会静止显示文字，还可能触发控制台警告。必须用 CSS 动画替代。
为什么直接写 <marquee></marquee> 会失效
它不是标准 HTML5 元素，W3C 早在 HTML5 草案阶段就将其移除；浏览器厂商（Chrome 90+、Firefox 80+、Safari 15+）已彻底停用底层渲染逻辑。即使页面能显示文字，也不会滚动，onmouseover="this.stop()" 这类 JS 绑定也无效——因为 DOM 上根本没这个接口。
CSS @keyframes 实现左滚跑马灯（最简可用版）
这是编辑器里最该优先复制粘贴的方案，兼容 IE10+，零 JS，无兼容性雷：
- 父容器必须设
overflow: hidden，否则内容撑开布局或溢出 - 滚动文本需包裹在
<span></span>或<div> 内，并加 <code>white-space: nowrap和display: inline-block -
padding-left: 100%是关键：让文字初始位置完全在视口右侧，避免闪动 - 动画起点用
transform: translateX(100%)，终点用transform: translateX(-100%)，别写成0% → -100%，否则首帧会跳 -
animation-duration别硬写 20s——内容宽约 600px 就设 12s（50px/s），太快看不清，太慢显停滞 - 预定义两个 class：
.marquee-paused { animation-play-state: paused; }和.marquee-reverse { animation-direction: reverse; } - 用
element.classList.toggle('marquee-paused')切换，而非赋值style.animationPlayState = 'paused' - 移动端要同时监听
touchstart和touchend，不能只靠mouseenter - 更新内容后重启动画：先
el.style.animation = 'none'，再void el.offsetWidth强制重排，最后恢复animation值 - 静态文案可复制一份内容拼接（如
text + text），配合transform: translateX(-50%)实现视觉无缝 - 动态插入内容必须用 JS 重新计算宽度：
el.scrollWidth或getBoundingClientRect().width，再重设animation-duration - 避免用
setInterval操控scrollLeft：老旧内网系统若真需兼容 IE11，要用requestAnimationFrame驱动，且步长 ≤ 1px，否则跳跃感明显 - 所有滚动容器必须设
scroll-behavior: auto（IE 默认smooth会导致卡顿）
鼠标悬停暂停 / 点击切换方向（JS 补充要点）
纯 CSS 的 :hover 只对桌面生效，移动端默认无悬停；且直接操作 style.animationPlayState 容易导致恢复时“瞬移”。正确做法是：
动态内容或响应式容器下的无缝断裂问题
当公告从后端实时推送、或容器宽度随屏幕缩放变化时，硬编码的 100% 和固定 animation-duration 会立刻露馅——滚动变卡顿、首尾出现空白、甚至停住。这时候：
