html中的marquee标签还能用吗？

处理html中的marquee标签还能用吗？这类问题时，先确认目标场景，再按步骤核对配置或玩法细节。

<marquee> 标签已废弃，HTML5 中非标准，现代浏览器仅兼容性支持但行为不一致、不可访问、不响应式、无SEO价值；应使用 CSS @keyframes + transform 替代，并注意可访问性与适配性。

不能用，而且早该被彻底移除。<marquee> 从 HTML5 开始就不是标准标签，所有现代浏览器只是出于兼容性“勉强支持”，但行为不一致、无法访问、不响应式、SEO 友好性为零——它不是“还能用”，而是“不该用”。

为什么浏览器还在渲染 <marquee>

因为大量老旧页面（尤其是企业内网、政府旧系统）曾重度依赖它，浏览器厂商选择“向后兼容”而非直接报错或忽略。但这不等于鼓励使用：

1. Chrome 和 Firefox 已明确标记为 Deprecated，DevTools 控制台会警告
2. Safari 对 direction="up" 或嵌套 <marquee> 支持极差，常直接静止
3. 屏幕阅读器完全忽略其内容，违反 WCAG 2.1 可访问性要求
4. 它不响应视口缩放，移动端文字可能溢出或被裁切

用 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%); }}

关键细节：

1. 动画时长 20s 需按文本长度动态调整，过短会卡顿，过长显呆滞
2. 必须加 padding-left: 100% 或用伪元素撑开空间，否则动画起始位置错乱
3. 要支持鼠标悬停暂停？加 .marquee:hover span { animation-play-state: paused; }
4. 若需循环多条消息，把多条文本包裹在 <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>`;  });}

注意陷阱：

1. 不要用 el.replaceWith() —— IE 不支持，且部分 marquee 属性（如 behavior="slide"）无对应 CSS 行为，需人工映射
2. loop="-1" 在 CSS 中得用 animation-iteration-count: infinite，别漏写
3. 原生 <marquee> 的 scrolldelay 是毫秒，CSS 动画得换算成 animation-duration，不是简单除以 1000

真正麻烦的从来不是“怎么让文字动起来”，而是动起来之后能否被读屏软件感知、能否在折叠屏上正常回流、能否被搜索引擎索引。这些，<marquee> 一个都做不到。