html输入框中，emoji和文字，数字有一小部分重合，原因是什么？

Question

html输入框中，emoji和文字，数字有一小部分重合，原因是什么？怎么解决？

谷歌浏览器。包括控制台和输入框

Answer 1

原因是什么？

我所知道的是：Chrome 渲染 emoji 的方式与其他浏览器（如Safari）相比有些不同。

在 Retina 屏幕下，Chrome 渲染正常：

而在非 Retina 屏幕下会出现 emoji 与文字重叠的问题：

PS: 有些开发者将这个问题视作 Bug 提交给 Google，所以这个问题在未来应该会有所改善。

怎么解决？

你可以做的是：

在非 Retina 屏下对 emoji 增加它的 margin-right 值。理论上你可以：

@media
not screen and (-webkit-min-device-pixel-ratio: 2),
not screen and (   min--moz-device-pixel-ratio: 2),
not screen and (     -o-min-device-pixel-ratio: 2/1),
not screen and (        min-device-pixel-ratio: 2),
not screen and (                min-resolution: 192dpi),
not screen and (                min-resolution: 2dppx) { 

  /* 在这里设定 emoji 的 margin */

}

---

参考文章
Is there any media query for non-retina display?

Answer 2

先膜拜楼上大佬。没想到居然和屏幕有关系。我还查了半天vscode怎么实现的，原来是屏幕不同。。。尴尬。

我写了个通过input输入，计算成dom的方法，题主可以看看
https://segmentfault.com/q/10...