应使用CSS动画替代标签，将设为inline-block或block并应用transform位移动画，同时添加aria-label提升可访问性，避免兼容性与无障碍问题。
滚动文字用 <marquee></marquee> 时，<a></a> 标签包裹无效？
直接用 <a></a> 包裹 <marquee></marquee> 内容（比如 <marquee><a href="...">点我</a></marquee>）在现代浏览器中大多能点击，但存在严重兼容性问题：<marquee></marquee> 是已被 HTML5 废弃的非标准标签，Chrome、Firefox 等新版浏览器虽暂未完全移除，但已不保证行为一致；部分移动端或严格模式下会忽略滚动逻辑，甚至导致链接失效。
用 CSS animation 替代 <marquee></marquee>，再套 <a></a>
这是当前最可靠、可维护的方式。核心是把滚动效果转为 CSS 动画，再将动画容器（如 <div>）用 <code><a></a> 包裹，或让 <a></a> 自身承担动画和链接双重角色。
-
<a></a>必须设为display: inline-block或block才能应用宽高与动画 - 动画需用
@keyframes定义位移（如transform: translateX()），避免影响语义和可访问性 - 记得加
text-decoration: none和color控制链接样式，否则默认下划线会随文字滚动“撕裂”
<a href="https://example.com" style="
display: inline-block;
white-space: nowrap;
animation: scroll-left 10s linear infinite;
text-decoration: none;
color: #007bff;
">这是一段向左滚动的可点击文字</a>
@keyframes scroll-left {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
如果必须用原生 <marquee></marquee>，怎么让链接稳定生效？
仅限老旧系统或内网低版本 IE 场景。关键不是“包裹”，而是确保 <marquee></marquee> 内部的 <a></a> 元素具备可点击区域：
- 给
<a></a>加display: inline-block+ 显式width和height，防止因滚动被裁剪而失焦 - 禁用
<marquee></marquee>的behavior="slide"，改用behavior="scroll"（滑动模式下链接更易响应） - 避免在
<marquee></marquee>上设置overflow: hidden，否则可能截断<a></a>的点击热区
示例：
立即学习“前端免费学习笔记（深入）”；
<marquee behavior="scroll" direction="left" scrollamount="3"> <a href="https://example.com" style="display:inline-block;padding:4px 8px;">点击跳转</a> </marquee>
移动端和无障碍支持容易被忽略的点
滚动文字本身对屏幕阅读器不友好，加链接后问题更突出：
- 必须添加
aria-label到<a></a>上，例如aria-label="跳转到示例网站"，否则读屏软件只读出“链接”，无上下文 - 移动端 Safari 对
<marquee></marquee>完全不支持；CSS 动画方案也需加-webkit-animation前缀并测试触控暂停逻辑（如animation-play-state: paused配合:hover） - 滚动速度过快会导致用户来不及点击，建议控制
animation-duration≥ 8s，并提供手动暂停按钮（需 JS 实现）
真正要上线的项目，别碰 <marquee></marquee> —— 它不是“能跑就行”，而是“今天能跑，明天就断”。CSS 动画+语义化 <a></a> 是唯一兼顾功能、维护性和合规性的路径。
