网站迁移至不同主机后CSS无px单位属性值失效是什么原因？

触发原因 #

1. 浏览器渲染模式差异 #

你遇到的是浏览器不同渲染模式的兼容规则差异：

• 原站点触发了怪异模式（Quirks Mode）：这是浏览器为了兼容早年不符合规范的网页保留的渲染逻辑，其中就包含自动为无单位的非0长度属性补全px单位的规则，所以你写的padding: 10 0;会被自动识别为合法属性生效。
• 新站点触发了标准模式（Standards Mode）：W3C标准明确规定，除了line-height、opacity这类本身允许无单位取值的属性外，所有长度属性的非0数值必须附带单位，否则会被判定为无效属性值，也就是你看到的「invalid property value」报错。

同一份代码渲染模式不同，大概率是迁移后新站点的HTML文档结构发生了细微变化：比如原站点HTML开头的DOCTYPE声明缺失/DOCTYPE前有空行、输出字符，触发了怪异模式；新站点的DOCTYPE声明规范且位于文档首行，进入了标准模式。

2. 主机服务端处理逻辑差异 #

原主机Dreamhost可能默认开启了CSS兼容处理逻辑，会自动为返回的CSS中缺失单位的长度属性补全px；而Siteground默认没有开启这类兼容处理，直接返回原始CSS代码，导致浏览器识别失败。

解决方案 #

临时应急方案（无需修改CSS代码） #

主动让新站点触发怪异模式即可兼容原有写法：删掉HTML文档最开头的DOCTYPE声明，或者在DOCTYPE之前添加任意空行/可见字符，浏览器就会自动切换到怪异模式，无单位的长度属性会自动补全px生效。

注意：怪异模式下CSS盒模型、新特性支持度都和标准模式有差异，可能引发其他未知样式问题，仅作为临时过渡方案使用。

长期合规方案 #

• 批量自动补全单位：不需要手动遍历修改CSS，用工具一键全量修复。比如用stylelint的自动修复功能，配置对应规则后执行命令npx stylelint "**/*.css" --fix即可自动为所有缺失单位的长度属性补全px。
• 开启主机兼容处理：检查Siteground后台的站点配置，寻找CSS自动兼容/预处理相关的功能，开启后服务端会自动补全单位再返回CSS给浏览器，无需修改本地代码。

内容的提问来源于stack exchange，提问作者Scerno