老浏览器颜色兼容需用紧凑rgb(255,0,0)或6位十六进制#ff0000,禁用空格、百分比、rgba、命名色(仅16种)、currentColor及opacity,背景透明用PNG+滤镜。
RGB 颜色值在老浏览器中的写法要注意括号和空格
IE6–IE8 支持 rgb(255, 0, 0),但不支持带空格的写法如 rgb(255 , 0 , 0)(逗号后有空格),也不支持百分比形式 rgb(100%, 0%, 0%)。部分早期 Opera 和 Safari 也对空格敏感。
实操建议:
立即学习“前端免费学习笔记(深入)”;
- 始终使用无空格、整数形式:
rgb(255,0,0),而非rgb(255, 0, 0) - 避免使用
rgba()——IE8 及更早版本完全不支持透明通道 - 若需灰阶,优先用
rgb(128,128,128)而非gray(IE8 不识别命名色gray)
十六进制颜色必须是 3 位或 6 位,不能带 # 后跟非十六进制字符
所有老浏览器(包括 IE6)都支持标准 3 位(如 #f00)和 6 位(如 #ff0000)写法,但会静默忽略非法格式,比如 #ff00000(7 位)、#fg0000(含非 hex 字符)或漏掉 # 的 ff0000(部分 IE 下可能被当无效值处理)。
实操建议:
立即学习“前端免费学习笔记(深入)”;
- 统一用 6 位写法,避免缩写歧义(例如
#abc在某些旧解析器中可能误判为#aabbcc的简写,但并非所有都支持) - 务必保留
#前缀;CSS 规范要求它,老浏览器也依赖它识别 - 不要混用大小写——虽然
#FF0000和#ff0000效果一样,但 IE6 对大小写不敏感,而某些嵌入式 CSS 解析器(如老版 QtWebKit)可能出问题
命名颜色只认 W3C 标准 16 色,扩展名如 rebeccapurple 完全不可用
IE6–IE8 仅支持最早的 16 个 HTML4 命名色:如 red、blue、maroon、navy 等。像 orange、tomato、slategray 这些 CSS2/3 新增的命名色,在 IE8 及以下会被忽略或回退为 black。