标记表情符号未呈现

我的标题上有一个下拉菜单，用于显示不同国家/地区的电话号码，我需要在其一侧放置一面旗帜，但没有显示任何旗帜，只有旗帜的字母表示（例如阿根廷国旗看起来像这个 🇦🇷 但它显示了字母 A 和字母 R 的表情符号）据我所知，标志表情符号是如何工作的，我怎么能避免这个（显示汉堡包）在第二个电话号码中只是为了表明表情符号确实在我的网站上有效）。

 <select name="Telefonos" id="group">
    <option value="+543515296002">&#x1F1E6;&#x1F1F7; +54351529600
    <option value="+12398105440">🍔 +12398105440
    <option value="+12398105440">🇺🇸 +12398105440
</select>

这是我尝试过的方法，无论是使用代码还是复制表情符号都不起作用，即使它在我编码时确实显示了。

这就是实际呈现的

原文由 leonidas56 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 612

无论您做什么，标志表情符号都可能不会呈现，具体取决于平台（而不仅仅是浏览器和/或浏览器字体）。要找出答案，请访问 https://emojipedia.org/search/?q=emoji+flags 并查看文本“ _旗帜：吉布提_”左侧的吉布提表情符号旗帜的呈现。

如果您看到旗帜的图像，一切都很好，但如果您只看到 DJ ，则可能不支持表情符号旗帜。我在 iPad、Linux Mint 18.2 和 Windows 10 上访问了那个页面，这是我发现的：

在 iPad 上呈现的吉布提国旗表情符号。
吉布提国旗在 Linux Mint 18.2 上使用 Firefox 呈现为 DJ 。
吉布提国旗在 Windows 10 上使用 Firefox 呈现为 DJ ，尽管这是意料之中的，因为 “ 微软不支持 Windows 上的任何国家国旗，而是显示两个字母的国家代码” 。

因此，如果你只想在 Apple 平台的浏览器中呈现表情符号标志，你应该没问题，如果你想在 Windows 的浏览器中呈现表情符号标志，它将呈现两个字符的国家代码。我不确定 Linux 上的情况，因为虽然它在我的环境中对我不起作用，但我找不到任何明确说明它应该或不应该起作用的东西。

如果您需要在所有平台上使用 Unicode 表情符号标志，另一种方法是下载免费的表情符号，它们实际上只是小的 png 图像。这里有一些阿根廷国旗的样本。

更新：

在没有如上所述的真正解决方案的情况下，这里有一种替代方法，它不使用 Unicode 表情符号，而是使用下载的 .png 图像：

 <!DOCTYPE html>
<html>
    <head>
        <title>Flag demo</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!–– Credit to Alvaro Montoro for this approach - see https://stackoverflow.com/a/41189982/2985643 ––>
        <link rel="StyleSheet" href="css/flagdemo.css">
    </head>
    <body>
        <h1>Flag demo</h1>
        <div class="select-sim" id="select-color">
            <div class="options">
                <div class="option">
                    <input type="radio" name="flag" value="" id="flag-" checked />
                    <label for="flag-">&#x2690; Pick a country</label>
                </div>
                <div class="option">
                    <input type="radio" name="flag" value="Argentina" id="flag-argentina" />
                    <label for="flag-argentina"><img src="img/argentina-flag-round-icon-16.png" alt="" /> Argentina</label>
                </div>
                <div class="option">
                    <input type="radio" name="flag" value="Brazil" id="flag-brazil" />
                    <label for="flag-brazil"><img src="img/brazil-flag-round-icon-16.png" alt="" /> Brazil</label>
                </div>
                <div class="option">
                    <input type="radio" name="flag" value="Chile" id="flag-chile" />
                    <label for="flag-chile"><img src="img/chile-flag-round-icon-16.png" alt="" /> Chile</label>
                </div>
            </div>
        </div>
    </body>
</html>

.css 文件 (flagdemo.css) 的内容与 Alvaro Montoro 在此 SO 对问题 How to add images in select list? 的回答中提供的内容相同。 .

由于此方法仅使用标准 HTML 和 CCS（无 Javascript 或 JQuery），因此它应该适用于任何平台：

原文由 skomisa 发布，翻译遵循 CC BY-SA 4.0 许可协议

标记表情符号未呈现

你尚未登录，登录后可以

问一个鼠标滚动事件，这种是怎么实现的？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

threejs用octree实现房间内第三人称漫游并且添加了碰撞，人物在碰撞到墙壁的时候不停的弹回，应该怎么修改才能不会疯狂的弹回？

Vue为什么说textarea标签不支持插值表达式的？

为什么下面的代码内部的 div 其 100% 高度可以跳过上层元素?

单页应用网站缓存不是由于index.html文件被缓存导致的吗？

election嵌套了一个web项目通信为什么会中断?

Stack Overflow 翻译