旧版 Safari 将 to right 视为无效语法，因其 WebKit 内核（iOS 5.1–6.1/Safari 5.1–6）仅支持裸方向词 right、bottom，不识别 to 前缀及对角线写法，导致整条 linear-gradient() 被忽略。

旧版 Safari 为什么把 to right 当成无效语法

因为 iOS 5.1–6.1 和 Safari 5.1–6 的 WebKit 内核根本不识别 to right 这类带 to 前缀的方向关键词。它只认裸关键词 right、bottom，且不支持对角线写法（如 top left）。一旦写了 to right，整条 linear-gradient() 就被忽略，背景回退为透明或父级颜色。

必须用 -webkit-linear-gradient + 裸方向关键词

现代写法 linear-gradient(to right, #f00, #00f) 在这些老版本里完全不生效，得补一行带前缀、且方向写法匹配的声明：

background: -webkit-linear-gradient(right, #f00, #00f);
background: linear-gradient(to right, #f00, #00f);

注意三点：

• -webkit-linear-gradient 的第一个参数只能是 left / right / top / bottom，不能加 to
• 角度写法在旧版 WebKit 里行为反直觉：比如 -webkit-linear-gradient(90deg, ...) 实际等效于标准语法的 0deg（向上），不是向右——所以别混用角度和关键词
• IE10 虽支持无前缀 linear-gradient，但它只认 to bottom 这种写法，不认 bottom 单词，所以老项目若还要兼容 IE10，得单独处理

写错方向关键词的典型错误现象

常见报错不明显，但效果直接消失：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• background: -webkit-linear-gradient(to right, ...) → Safari 6 忽略整条规则，背景变白或透出下层
• background: -webkit-linear-gradient(top left, ...) → 旧版解析失败，渐变不渲染
• background: -webkit-linear-gradient(90deg, ...) 在 Windows Safari 下指向“上”，不是“右”，视觉完全错位

真正安全的组合只有：-webkit-linear-gradient(right, ...) 对应水平向右，-webkit-linear-gradient(bottom, ...) 对应垂直向下。

要不要保留 to 关键词？看目标最低系统版本

如果项目明确不支持 iOS 6 及更早、Safari 6 及更早，那 to right 完全可用，无需前缀；但只要还有微信 iOS 内置 WebView（部分仍基于旧 WebKit）、或企业内网老设备残留，就必须按双写法兜底。另外注意：to left 在旧版里没有对应裸词（left 是合法的），但 to top left 这种双关键词连写，在所有旧版里都不可用——得换算成角度并慎用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！