Firefox无法加载含srcset的picture元素，Chrome/Edge正常，求正确语法

你的代码在Firefox中无法加载图片，核心原因是第三个<source>标签的srcset属性末尾存在多余的逗号，Firefox对srcset的语法校验遵循规范严格执行，而Chrome/Edge的引擎会容错这类语法错误，因此出现了浏览器兼容性问题。

错误点定位 #

第三个<source>的srcset末尾多了一个无效逗号：

<source srcset="https://example.com/h-1080.webp,https://example.com/h-2796.webp 2x," media="(max-height: 932px)">
<!-- 末尾的逗号违反了srcset的语法规范 -->

HTML规范要求srcset的资源列表必须是[图片URL] [可选密度描述符]的有效组合，多个资源用逗号分隔，但不允许末尾出现多余的分隔逗号。

修正后的代码 #

移除多余逗号后，Firefox即可正常解析加载：

<picture style="position: absolute;">
  <source srcset="https://example.com/h-768.webp,https://example.com/mh-1728.webp 2x,https://example.com/h-1728.webp 3x" media="(max-height: 768px)">
  <source srcset="https://example.com/h-1080.webp,https://example.com/h-1728.webp 2x,https://example.com/h-2796.webp 3x" media="(max-height: 864px)">
  <source srcset="https://example.com/h-1080.webp,https://example.com/h-2796.webp 2x" media="(max-height: 932px)">
  <source srcset="https://example.com/h-2796.webp" media="(min-height: 1081px)">
  <img src="https://example.com/h-768.webp" alt="alt" class="class">
</picture>

Firefox使用srcset的关键语法规则 #

• 每个资源项格式：图片URL + 可选的密度描述符（如2x），两者间可加空格
• 多个资源项用逗号分隔，末尾不能留逗号
• 确保使用的图片格式（如WebP）在目标Firefox版本中受支持（Firefox 68+支持WebP）

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