iOS Safari 13.3及更早版本完全不支持background-size: cover，静默退化为auto；IE8–9和老版双核浏览器也不识别该属性，需用filter或JS降级处理，且须注意简写语法兼容性与声明顺序。
background-size: cover 在 iOS Safari 13.3 及更早版本根本无效
它不是“显示异常”，而是被浏览器完全忽略——静默退化为 background-size: auto。这意味着图片按原始尺寸渲染，不缩放、不裁剪，再叠加容器 height: auto 或未设高，视觉上就变成缩在左上角一小块，或被父容器强行拉伸变形。加 -webkit-background-size 前缀也无效，这是 WebKit 引擎级缺失支持，不是 CSS 写错。
IE8–IE9 和部分国产双核浏览器（如老版 360）压根不识别 background-size
这些浏览器连 background-size: 100% 100% 都不解析，直接跳过整条声明。常见表现是背景图只显示左上角局部，或完全不出现（尤其当路径+其他属性都正确时）。此时靠前缀或简写无效，必须降级处理：
- 对 IE：用
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader+ 绝对路径模拟缩放，且src必须和background-image的路径完全一致 - 对双核浏览器（如老 360）：需检测内核并强制切到 WebKit 内核，或改用 JS 动态计算容器尺寸后设置
background-position和background-repeat模拟 cover 效果 - 所有场景下，
background-repeat: no-repeat必须显式声明，否则 fallback 时会重复铺满，掩盖问题
background-size 百分比值在不同浏览器中参照系不一致
background-size: 50% 100% 这类写法，在 Chrome/Firefox 中以容器宽高为基准；但在 Safari 12–13.2 中，高度百分比可能按图片原始高度计算，导致纵向拉伸。更隐蔽的问题是：background-origin 默认值（padding-box）在旧浏览器中行为不统一，若容器有 padding，实际缩放区域会偏移。
- 避免混用百分比和
cover/contain，比如background-size: cover 50%—— 多数浏览器会忽略整条声明 - 若必须用百分比，优先用固定像素值（如
background-size: 300px 200px），或配合background-origin: border-box显式锁定参照系 - 注意
background-attachment: fixed与background-size联用时，在 iOS Safari 中滚动会触发重绘异常，“拉伸”是假象，本质是定位失效
复合 background 属性顺序错误导致覆盖 background-size
写 background: url(...) no-repeat center / cover; 看似简洁，但 Safari 12 及更早版本不支持斜杠语法，整条声明被丢弃；而如果写成 background: url(...) no-repeat; background-size: cover;，后者又可能被 Bootstrap 等框架的 reset 规则覆盖（因 specificity 不足）。
立即学习“前端免费学习笔记（深入）”；
- 永远把
background-size单独拆出行写，并放在background-image之后、background-position之前 - 检查 computed styles，确认
background-size是否真被应用——很多“异常”其实是被更高优先级规则干掉了 - 不要依赖
background简写去覆盖单个子属性，旧浏览器解析简写时容易丢弃不认识的部分
