legend 的 align 属性已废弃，现代浏览器不再支持；text-align 仅影响文字对齐而非整体位置；需用 display: block + margin 或 flex 布局实现右对齐；fieldset 设为 flex/grid 会破坏 legend 嵌入机制，应包裹 div 或改用 inline-flex；重置样式时须保留 margin 并避免 position: absolute、display: contents 等破坏可访问性的写法。
legend 的 align 属性为什么失效了
它早就被废弃了，不是你写错，是浏览器根本不该响应 align="right" 这类属性。HTML 4.01 起就标记为不赞成使用，XHTML Strict 更是直接不支持。现代浏览器（Chrome、Firefox、Safari）对 align="top" 或 align="bottom" 基本无视，align="left" 和 align="right" 虽然部分兼容，但行为不可靠——比如旧版 Safari 可能完全跳过，VoiceOver 读不出对齐语义。别再往 <legend align="..."> 里填值了。
text-align 对 legend 为什么只影响文字，不移动整个标题
legend 默认是 inline 元素，text-align 只控制其内部文本的水平对齐，不改变它在 fieldset 上边框中的锚点位置。所以 text-align: right 会让文字右贴边，但标题整体还是“嵌”在左上角起始处，容易和输入框重叠。
- 想让整个
legend在顶部右对齐：用margin-left: auto;（配合display: block）或父容器display: flex; justify-content: flex-end; - 想居中：
legend { display: block; margin: 0 auto; }，别依赖text-align: center - 避免设
width或max-width，Firefox 下容易导致换行错位
fieldset 设了 flex/grid 后 legend 错位或消失
一旦给 fieldset 加 display: flex 或 display: grid，原生的“legend 嵌入上边框”机制就崩了——它会退化成普通子元素，可能卡在左上角、被裁剪、甚至被边框盖住。
- 安全做法：把
legend包进一个<div>，再对这个div设align-self: flex-start - 或者改用
legend { display: inline-flex; align-items: center; }，比block更稳 - 绝对不要给
legend设position: absolute，它会脱离语义流，屏幕阅读器无法关联控件
重置 fieldset 样式后 legend 看不见或压边
清掉默认边框（border: none）和 padding 后，legend 失去定位参照，很容易贴着内容顶部、文字被裁、或干脆看不见。
立即学习“前端免费学习笔记（深入）”；
- 必须保留最小可用 margin：
legend { margin: 0.5em auto 0.75em; }，否则标题和控件之间没呼吸感 - 加
position: static显式重置，防止浏览器沿用内置定位逻辑 - 如果用了
border-radius，一定要同步加overflow: hidden，否则legend会溢出圆角外 - 别用
display: contents搞视觉优化——它会让legend从 DOM 结构中“消失”，可访问性归零
