中插入会因默认baseline对齐导致视觉下沉，需用vertical-align修正；多段内容需inline-block/flex布局控制间距与换行；样式受限时可用伪元素绕过；无障碍需合理使用alt和aria属性。
legend 里放 <img> 会触发什么渲染行为
<legend></legend> 是表单控件 <fieldset></fieldset> 的标题容器，语义上只接受“可替换内容”或“短文本”，但浏览器实际允许插入 <img>、<span></span> 甚至内联 SVG。问题在于：Chrome/Firefox/Safari 对 <img> 的垂直对齐默认不同——<img> 默认 baseline 对齐，导致图片底部与文字基线对齐，视觉上“下沉”，和 legend 文字错位。
实操建议：
- 给
<img>加vertical-align: middle或vertical-align: top，避免基线偏移 - 不要依赖
<img>的height自适应；显式设height或max-height，防止 legend 高度异常撑开 - 若图片需响应式，用
width: 1em+height: auto配合font-size控制缩放，比百分比更稳定
legend 内多段文本混排时的换行与间距控制
直接写多个 <span></span> 或纯文本在 <legend></legend> 中，默认是连续流式布局，空格和换行符会被压缩成单空格，无法自然折行。想实现“图标+主标题+副说明”三段式，不能靠 <br>（语义错误且部分浏览器忽略）。
实操建议：
- 用
<span></span>包裹各段，配合display: inline-block或display: inline-flex精确控制间距 - 避免用
margin直接加在<span></span>上——legend 容器本身有默认 padding，外边距易被折叠或干扰边框位置 - 推荐用
gap（需父级设display: flex）或padding-inline-end分隔图文，兼容性更好 - 若要换行，必须设
white-space: normal并确保容器宽度足够窄（如max-width: 200px），否则仍不折行
fieldset + legend 的样式穿透限制与绕过方式
<legend></legend> 是 <fieldset></fieldset> 的第一个子元素，且浏览器对其应用了强默认样式（比如 Firefox 强制 position: relative、Chrome 对 border 渲染特殊）。直接对 <legend></legend> 设置 background 或 transform 常常失效，尤其当它覆盖在 fieldset 边框顶部时。
实操建议：
- 不要试图用
z-index提升<legend></legend>层级——它没有 stacking context，除非手动加position: relative+z-index - 若需背景遮盖 fieldset 边框，改用伪元素：
legend::before绘制矩形背景，并设content: ""+position: absolute - 所有字体、颜色、内边距调整，优先作用于
legend本身；但padding会影响 fieldset 整体尺寸，建议用inset替代border模拟边框以规避干扰
无障碍访问下 legend 多重内容的正确标记方式
屏幕阅读器会把 <legend></legend> 整体作为 fieldset 的标签读出。如果里面塞了图片、图标、辅助说明，而没做语义标注，会导致信息冗余或缺失——比如图标没 alt，或副文本被当成主标题一部分朗读。
实操建议：
-
<img>必须带alt=""（装饰性）或有意义的alt（功能性），禁止留空或省略 - 副文本用
<span aria-hidden="true"></span>包裹，若它仅作视觉补充；若需朗读，改用<span aria-label="..."></span>或aria-describedby关联外部<div> <li>避免在 <code><legend></legend>中嵌套<h2>~<h6></h6> </h2>——legend 本身已是标题角色，嵌套标题会破坏层级结构
真正麻烦的是 fieldset 边框和 legend 重叠区域的点击热区判断，以及 Safari 下 legend 宽度计算的 bug。这些细节不调试到真机很难发现，别全信 devtools 的 layout 预览。
