标签已被W3C彻底废弃，Chrome/Firefox/Safari均不保证支持，实际项目中使用属于技术负债；必须用CSS @keyframes + transform: translateX()实现滚动，需设overflow: hidden、white-space: nowrap，并确保动画时长、线性计时与无缝衔接。
用 <marquee></marquee> 标签实现滚动文字，但别真用它
现代浏览器虽仍能解析 <marquee></marquee>，但它早已被 W3C 废弃，没有标准支持，Chrome/Firefox/Safari 都不保证未来兼容。实际项目中直接写 <marquee></marquee> 属于技术负债——今天能动，明天可能错位、卡顿或干脆不渲染。
marquee 的常见错误现象和参数陷阱
即使临时测试，也会遇到意料外行为：
-
behavior="slide"滚完就停，不是循环；behavior="scroll"才连续滚动，但默认速度极快 -
direction="up"或"down"时，若容器没设固定高度+overflow: hidden，文字会溢出不可见 -
scrolldelay="100"单位是毫秒，但实际延迟受浏览器重绘节奏影响，数值调不准 - 内嵌
<a></a>或<img alt="怎样在网页中创建一个滚动的文字条_MARQUEE标签实现动效" >时，部分旧版 IE 会触发点击区域错位
用 CSS @keyframes 替代的最小可行方案
真正可控、可维护的方式是 CSS 动画。以下代码实现左进右出的无缝横滚（适配现代浏览器）：
<div class="marquee">
<span>新闻速递：AI模型推理速度提升3倍｜产品上线倒计时｜用户反馈通道已开放</span>
</div>
<style>
.marquee {
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 20s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>
关键点：
- 用
padding-left: 100%初始把文字完全推到右侧，避免动画开始前闪现 - 动画时长
20s可按内容长度调整，太短会滚动过快，太长则停顿感强 - 若需暂停（如 hover），加
.marquee:hover span { animation-play-state: paused; }
滚动方向、性能与无障碍注意事项
垂直滚动或反向滚动只需改 transform 和容器样式，但有硬性约束：
- 垂直滚动必须给父容器设明确
height，且子元素display: block，否则动画失效 - 大量文字或高频更新时，用
will-change: transform提升合成层，避免重排卡顿 - 屏幕阅读器会逐字读出滚动内容，造成干扰。务必加
aria-hidden="true"并提供静态替代文案 - 移动端 Safari 对
transform动画优化较好，但 iOS 15 之前不支持animation-timing-function: linear在 transform 上的精确表现
真正难的不是让字动起来，而是让动得稳、停得准、读得清、缩放时不崩——这些细节，<marquee></marquee> 一个都不管。
