<marquee> 标签已废弃，HTML5 中非标准，现代浏览器仅兼容性支持但行为不一致、不可访问、不响应式、无SEO价值；应使用 CSS @keyframes + transform 替代，并注意可访问性与适配性。
不能用，而且早该被彻底移除。 <marquee> 从 HTML5 开始就不是标准标签，所有现代浏览器只是出于兼容性“勉强支持”，但行为不一致、无法访问、不响应式、SEO 友好性为零——它不是“还能用”，而是“不该用”。
为什么浏览器还在渲染 <marquee>
因为大量老旧页面（尤其是企业内网、政府旧系统）曾重度依赖它，浏览器厂商选择“向后兼容”而非直接报错或忽略。但这不等于鼓励使用：
- Chrome 和 Firefox 已明确标记为
Deprecated，DevTools 控制台会警告 - Safari 对
direction="up"或嵌套<marquee>支持极差，常直接静止 - 屏幕阅读器完全忽略其内容，违反 WCAG 2.1 可访问性要求
- 它不响应视口缩放，移动端文字可能溢出或被裁切
用 CSS @keyframes 替代的最小可行方案
核心思路：用 transform: translateX() 配合 animation 实现水平滚动，可控、可暂停、可适配。
.marquee {
overflow: hidden;
white-space: nowrap;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: scroll 20s linear infinite;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
关键细节：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 动画时长
20s需按文本长度动态调整，过短会卡顿，过长显呆滞 - 必须加
padding-left: 100%或用伪元素撑开空间，否则动画起始位置错乱 - 要支持鼠标悬停暂停？加
.marquee:hover span { animation-play-state: paused; } - 若需循环多条消息，把多条文本包裹在
<span>内并重复拼接一次，避免衔接缝隙
遇到遗留代码时怎么安全降级
如果必须维护老项目且不能改 HTML 结构，用 JavaScript 检测并接管：
if ('marquee' in document.createElement('div')) {
// 浏览器识别该标签（说明是旧引擎或兼容模式）
document.querySelectorAll('marquee').forEach(el => {
const text = el.textContent || el.innerText;
el.outerHTML = `<div class="marquee"><span>${text} ${text}</span></div>`;
});
}
注意陷阱：
- 不要用
el.replaceWith()—— IE 不支持，且部分 marquee 属性（如behavior="slide"）无对应 CSS 行为，需人工映射 -
loop="-1"在 CSS 中得用animation-iteration-count: infinite，别漏写 - 原生
<marquee>的scrolldelay是毫秒，CSS 动画得换算成animation-duration，不是简单除以 1000
真正麻烦的从来不是“怎么让文字动起来”，而是动起来之后能否被读屏软件感知、能否在折叠屏上正常回流、能否被搜索引擎索引。这些，<marquee> 一个都做不到。
