valign属性在现代浏览器中已完全失效，chrome/firefox/edge 90+彻底忽略，firefox strict mode下不解析，应统一改用css的vertical-align（基础场景）或flex布局（复杂内容）。
valign 属性在现代浏览器中根本不能解决兼容分歧——它已被 HTML5 明确废弃，Chrome/Firefox/Edge 90+ 已完全忽略，Firefox 在 strict mode 下直接不解析，IE11 及更早版本行为也不一致。你不是在“调兼容性”，而是在用一个早已失效的属性碰运气。
valign 在不同浏览器里为什么表现不一？
- 它不是“部分支持”，而是“有条件回退”：浏览器只在 legacy parsing mode 下尝试容错渲染，一旦遇到
display: flex父容器、vertical-alignCSS 覆盖、或 XHTML 文档类型，就直接跳过 - Firefox 会优先遵守 CSS
vertical-align，哪怕valign="middle"写在 HTML 里，也可能被静默丢弃 - Chrome 90+ 和 Edge 90+ 对
valign的解析已降级为“仅当无任何 CSS 干预时的兜底行为”，实际项目中几乎不可控 - 所有 W3C 验证器都会报
obsolete attribute错误，CI 流程可能直接拦截
为什么 vertical-align CSS 也常“看起来没对齐”
-
vertical-align: middle对齐的是行框（line box）中点，不是单元格几何中心；多行文本、图片、line-height偏移都会导致视觉偏差 - 它只对
td、th（即display: table-cell）生效，写在tr或table上完全无效 - 单元格高度未显式撑开时（例如仅含单行短文本），
vertical-align: middle和baseline几乎无差别 - 常见干扰项：
padding被 UA 样式默认设为2px，border-collapse: collapse下边框会挤压可用空间，font-size缩放后基线偏移
怎么让垂直居中在所有现代浏览器里真正一致
- 统一用 CSS 控制，删掉所有
valign=属性，全局搜索替换并删除 - 基础方案（推荐多数场景）：
td, th { vertical-align: middle; padding: 12px 8px; }padding比height更健壮——不依赖固定像素，适配字体缩放和响应式断点 - 复杂内容（图文混排、按钮+文字、多段落）必须用 Flex：
td.flex-center { display: flex; align-items: center; min-height: 48px; }注意：必须设min-height，否则 Flex 容器高度塌陷，居中失效 - IE11 兼容只需加一行前缀（如需）：
td.flex-center { display: -ms-flexbox; -ms-flex-align: center; }
真正容易被忽略的是：垂直对齐是否可见，取决于单元格有没有“可测量的高度上下文”。哪怕所有样式都写对了，空 td、未设 padding、或被 line-height: 1 压扁的文本，都会让 vertical-align 彻底隐形。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
