相关疑难解决方法(0)

在谷歌浏览器中将表情符号在视觉上水平居中非常困难，因为表情符号右侧似乎有不应该存在的空白。一个例子：

.avatar {
  width: 30px;
  
  padding: 10px;
  background-color: #eee;
  border-radius: 50%;
  
  display: grid;
  justify-items: center;
  align-items: center;
}

<div class="avatar">
  <div>&#x1F436;</div>
</div>

https://codepen.io/tommedema/pen/xxbXBRe

在 MacOS Catalina 10.15.2 上的 Chrome 79.0.3945.79 中，它呈现为：

显然，它在视觉上不是水平居中的。然而，在其他浏览器（如 Safari 和 Firefox 71）中，它是：

关于 Carol 使用 font-size 和 box-sizing 的回答，结果还是一样。我选择了表情符号/文本，以便您可以更清楚地看到表情符号右侧有空格的问题，但仅在 Chrome 上而不是在其他浏览器上：

根据一篇关于CSS-Tricks的文章,未来的视网膜显示媒体查询可以写成:

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

  /* Retina-specific stuff here */

}

如果我想为非视网膜显示器编写CSS代码怎么办？

我知道您可以先为非视网膜显示器编写一些CSS代码,然后使用上述媒体查询覆盖视网膜显示.但有没有专门针对非视网膜显示的媒体查询？