如何修复安卓版Edge浏览器深色模式下图片背景异常问题

问题根源 #

安卓版Edge的深色模式会自动对图片进行颜色反转适配，你的黑底白字按钮被强制将背景改为白色，导致白色文字完全不可见。

解决方案 #

方案1：禁用浏览器颜色强制调整（快速修复）

给img标签添加forced-color-adjust: none样式，阻止Edge修改图片的颜色和背景：

<img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&releaseDate=1667952000"
     alt="Download on the App Store"
     style="border-radius: 13px; width: 90%; forced-color-adjust: none;">

这个CSS属性会强制浏览器保留元素的原始颜色设置，直接规避Edge的自动反转行为。

方案2：使用适配深色背景的按钮版本

直接替换苹果API链接中的black为white，获取白底黑字的按钮，适配你的黑色网站背景，同时从根源避免Edge的自动调整：

<img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/white/en-us?size=250x83&releaseDate=1667952000"
     alt="Download on the App Store"
     style="border-radius: 13px; width: 90%;">

这种方案视觉上更贴合深色背景的网站风格，无需额外CSS。

方案3：自动适配系统颜色模式

使用<picture>标签，让浏览器根据系统的深色/浅色模式自动切换对应按钮：

<picture>
  <!-- 深色模式加载白底黑字按钮 -->
  <source media="(prefers-color-scheme: dark)" 
          srcset="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/white/en-us?size=250x83&releaseDate=1667952000">
  <!-- 默认/浅色模式加载黑底白字按钮 -->
  <img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&releaseDate=1667952000"
       alt="Download on the App Store"
       style="border-radius: 13px; width: 90%;">
</picture>

该方案能兼顾不同系统模式下的显示效果，提升用户体验。

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