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

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

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

在 Liquid 渲染的 HTML 表格中，

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

解决方法非常直接：为每个 添加内联样式 vertical-align: top。该 CSS 属性专用于控制单元格内容在行框（line box）内的垂直定位，且在标准表格布局中兼容性极佳（支持所有现代浏览器及 IE8+）。

以下是修正后的完整代码示例：

Ardot

腾讯设计推出的类似Figma的AI协同UI/UX 设计工具

下载

{{ '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 作用于 （而非 或 ），必须写在单元格标签内；
  无需修改 Liquid 逻辑或引入额外 JavaScript，纯 CSS 方案轻量可靠；
  若后续需统一维护样式，建议将 vertical-align: top 提取至外部 CSS 类（如 .align-top { vertical-align: top; }），再通过 class="align-top" 应用，提升可维护性；
  注意：vertical-align 对 display: table-cell 元素生效（
  默认即为此值），若误设 display: block 等属性会导致失效，应避免覆盖默认显示模式。

  通过这一微小但精准的样式调整，即可确保 Windows 与 Mac 两列内容严格顶部对齐，显著提升产品页信息呈现的专业性与可读性。