text-align在macos和windows上表现一致，但因pingfang sc与microsoft yahei字宽、baseline及标点留白差异，导致视觉对齐偏差；vertical-align: middle因渲染引擎计算方式不同而浮动0.5–1px；需靠font-family回退链、line-height统一及必要时transform精准控制。
table里text-align在macOS和Windows上表现不一致？
不是CSS失效，而是字体渲染差异放大了对齐偏差。同一段text-align: right代码，在Windows上数字小数点整齐对齐，在macOS上却看起来“偏左一像素”。根本原因是：PingFang SC和Microsoft YaHei的字宽、字间距、baseline位置不同，尤其对全角数字和负号（− vs -）的处理逻辑不一致。
- 别指望靠
text-align单独解决跨平台对齐——它只管“内容在单元格里的水平锚点”，不管“每个字符实际占多少像素” - macOS下
PingFang SC对中文标点（如、。）的左右留白比Windows的Microsoft YaHei略大，导致相同td宽度下，文字视觉重心偏移 - 验证方法：用
getBoundingClientRect()取同一列所有td的right值，macOS结果常比Windows小1–2px
vertical-align: middle在不同系统里为什么总差那么一点？
vertical-align: middle在表格单元格里不是“让文字垂直居中”，而是“让内容基线对齐到单元格高度的中点再上移半个x-height”。问题在于：macOS用灰度抗锯齿，Windows用ClearType亚像素渲染，两者计算baseline的方式不同，导致同一font-size下，文字实际渲染的顶部/底部位置有0.5–1px浮动。
- 如果
td没设固定height，浏览器会按当前字体自动撑高，而PingFang SC和Microsoft YaHei的em-box高度不同，进一步扩大middle的误差 - 临时缓解：给
td加line-height: 1.4（不要用1.4em或20px），让行高脱离字体度量影响 - 真要精确控制，得用
transform: translateY(-50%)配合position: relative，但会增加重排开销
font-family fallback链写错，直接让text-align失效
写font-family: "Microsoft YaHei", sans-serif;在macOS上，"Microsoft YaHei"根本不会被加载，浏览器直接跳到sans-serif（通常是-apple-system），而这个字体在中文语境下对数字的字宽定义和Windows完全不同——于是你写的text-align: right还在，但“右”的参照系已经变了。
- 正确fallback顺序必须把各系统主力中文字体前置：
-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif - 千万别把
"SimSun"放前面——Win11默认不带宋体，反而触发降级到更不可控的后备字体 - 西文字体（如
Helvetica Neue）虽不影响中文显示，但会影响混排中的英文、数字、标点渲染，间接改变单元格整体宽度，从而影响text-align的视觉效果
表格对齐真正的复杂点不在CSS写法，而在字体链+渲染引擎+盒模型三者叠加
你调了半天text-align和vertical-align，最后发现Chrome DevTools里computed styles一切正常，但真机上还是不对齐——大概率是字体fallback没生效，或者td内部有div没设display: block，导致vertical-align被忽略。跨平台表格对齐不是单点问题，而是字体、渲染、布局三层耦合的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
