在 Shopify Liquid 模板中，当表格左右两列内容高度不一致时，默认会居中对齐，导致视觉错位；只需为 元素添加 vertical-align: top 样式即可统一顶部对齐。

在 shopify liquid 模板中，当表格左右两列内容高度不一致时，默认会居中对齐，导致视觉错位；只需为 `

` 元素添加 `vertical-align: top` 样式即可统一顶部对齐。

Liquid 本身不提供原生的垂直对齐控制逻辑，其渲染结果依赖于最终输出的 HTML 和 CSS。表格单元格（

）默认的 vertical-align 值为 middle，这意味着即使两列文本行数不同（例如 Mac 列内容更长），浏览器也会将每列内容在其单元格内垂直居中，从而造成“错层”视觉效果。

解决方法非常直接：为每个 显式设置 vertical-align: top。该 CSS 属性专用于表格单元格（以及 inline/table-cell 元素），能确保内容始终紧贴单元格顶部边界，无论内容长短。

以下是修正后的完整代码示例（已补全缺失的

Remusic

Remusic - 免费的AI音乐、歌曲生成工具

下载

和 结构，并优化可读性）：

{{ 'https://cdn.shopify.com/s/files/1/0556/5258/1539/files/windows-logo.png' | img_tag: 'Windows Compatible Operating Systems' }} Windows Compatible Operating Systems {{ product.metafields.custom.windows_compatible_operating_systems_3_0 }}

{{ 'https://cdn.shopify.com/s/files/1/0556/5258/1539/files/mac-logo.png?v=1707807667' | img_tag: 'Mac Compatible Operating Systems' }} Mac Compatible Operating Systems {{ product.metafields.custom.mac_compatible_operating_systems_3_0 }}

✅ 关键注意事项：

• vertical-align: top 仅对 display: table-cell（即默认 ）生效，若后续通过 CSS 修改了 td 的 display 属性（如设为 block），该属性将失效；
• 不需要额外设置 height 或 line-height，除非有特殊排版需求；
• 推荐将样式提取至主题 CSS 文件中复用（例如 .compatibility-table td { vertical-align: top; }），避免内联样式冗余；
• 若需响应式适配（如移动端堆叠显示），建议配合媒体查询或改用 Flexbox/CSS Grid——但 Liquid 模板中仍需先保证基础表格语义结构正确。

通过这一微小但关键的样式调整，即可彻底解决因内容长度差异导致的垂直错位问题，提升产品规格表的专业性与可读性。