不能用。marquee标签虽被主流浏览器支持，但未被html5规范定义，存在兼容性、可访问性和维护性问题；现代开发应使用css+javascript替代，并必须处理prefers-reduced-motion和focus-visible以满足无障碍要求。
marquee 标签还能用吗？别被兼容性骗了
能渲染，但不该用。所有主流浏览器（Chrome、Firefox、Safari、Edge）目前仍支持 <marquee></marquee>，但它在 HTML5 规范中根本不存在，W3C 和 WHATWG 都没定义它。实际开发中会遇到：Safari 忽略 scrolldelay，Firefox 对 behavior="alternate" 的反弹位置计算不准，屏幕阅读器直接跳过整个标签——这不是“偶尔出问题”，而是设计层面的不可靠。
如果非要快速上线，marquee 的最小安全写法
仅限内部系统、后台公告、临时页面等对可访问性和长期维护无要求的场景。必须满足以下三点，否则滚动会错位或卡死：
-
direction和behavior属性显式写出，不依赖默认值（比如写direction="left"而非省略） - 固定容器宽高，配合
width和height属性（如width="800"），避免内容撑开导致滚动中断 - 禁用鼠标悬停暂停逻辑（
onmouseover="this.stop()"等），因为不同浏览器对事件绑定的支持不一致，Chrome 可能触发两次 stop
示例：<marquee direction="left" behavior="scroll" width="600" height="40">紧急通知：系统将于今晚22:00升级</marquee>
无缝滚动失败的根源：百分比位移 vs 实际像素宽度
很多人用 CSS 替代 <marquee></marquee> 后反而出现空白闪动，问题不在动画本身，而在误用了百分比位移。例如 @keyframes scroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } —— 这里 100% 是父容器宽度，但子内容总宽往往不等于它（尤其含空格、换行、内边距时），导致终点无法对齐起点。
真正可靠的解法是：
- 把每段滚动文本包进独立
<span></span>或<div class="marquee-item"> <li>用 JavaScript 测量该元素的 <code>offsetWidth，或手动设为已知像素值（如274px） - 动画位移值直接写死：
transform: translateX(274px)→transform: translateX(0) - 内容重复至少两遍（
文本|文本|），否则单次位移后无后续内容接续 -
@media (prefers-reduced-motion: reduce) { .marquee-content { animation: none; } }—— 不是可选项，是 WCAG 2.1 AA 级合规要求 - 给滚动容器加
tabindex="0"，并在 CSS 中定义:focus-visible { outline: 2px solid #007bff; }，否则键盘用户无法感知焦点位置
现代方案里最容易被忽略的细节：prefers-reduced-motion 和 focus-visible
光让字幕动起来不难，让它“不伤害用户”才关键。两个硬性条件必须加：
没有这两条，再平滑的滚动也是残障用户眼中的干扰源。不是“加了更好”，是“不加就违规”。
