如何解决Edge浏览器中option标签内国旗emoji显示异常问题

你的代码写法没有任何错误，该显示差异是浏览器和系统的emoji渲染机制不同导致的：

• 国旗类emoji的本质是两个连续的区域指示符号字符组合而成，你使用的🇩（对应区域符号D）和🇪（对应区域符号E）刚好对应德国的两位国家代码DE，符合emoji标准的实现会将这两个连续字符合并渲染为德国国旗。
• Firefox自带了独立的emoji渲染逻辑和内置emoji字体，不受操作系统自带字体的限制，会主动识别符合国家代码规则的区域指示符号对，合并为国旗渲染，所以显示正常。
• Windows平台下的Edge浏览器默认调用系统自带的Segoe UI Emoji字体渲染emoji，Windows 11 22H2之前的系统版本中，该字体不支持区域指示符合并为国旗的特性，只会单独渲染两个独立的字母emoji，就会出现你观测到的显示异常。

如果需要全平台全浏览器统一显示效果，可以参考两种方案：

• 放弃原生emoji实现，改为在选项中插入静态国旗图片，保证所有场景下显示一致
• 引入支持国旗emoji渲染的自定义web字体，指定下拉选项的字体为该自定义字体

如果仅需要适配较新的Windows设备，用户将系统升级到Windows 11 22H2及以上版本即可正常显示国旗emoji。

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