前几天我正在处理一个错误工单，用户报告说一个图标在一个按钮中靠得太低。它并没有像预期那样对齐。我不得不进行一些操作来弄清楚如何重现它，然后再进行修复。让我来设置场景。
这是截图
但是当我查看我机器上的按钮时，它看起来完全没问题
什么鬼？平台相同（macOS）、浏览器相同（Firefox）、版本相同，所有东西都一样。团队中的其他人也查看了，对他们来说也是正常的。
然后有了发现！（感谢，Klare。）
它只在她的低分辨率外接显示器上才会出现。我不知道“低”是否公平，但它不是 MacBook Pro 的“视网膜”，无论它是什么。
我的问题是我甚至没有一台不是高分辨率的显示器了。所以我要如何测试呢？也许我只是… 不能？不！我可以！看看。我可以在我机器上的 Firefox 应用程序中“获取信息”，然后勾选这个框
现在我就可以直观地看到错误了。据我所知，它只在 Firefox 中出现。也许是像素… 舍入问题？我并不知道。 这里有一个简化的测试用例，用于展示 HTML/CSS。
解决办法？与其使用inline-block 显示类型，我们改为使用inline-flex，这似乎是按钮的正确显示类型，因为 flexbox 在居中方面非常出色。
.button {
/* a million things so that all buttons are perfect and... */
display: inline-flex;
align-items: center;
}
你可能只需要将 Firefox 的页面缩放比例更改为 50% 左右。或者暂时将整个操作系统（如果 macOS 支持的话）切换到 100% 缩放比例，而不是 HiDPI 显示器默认的 200% 缩放比例。
inline-flex或inline-grid与设置好的gap属性是处理带有图标的按钮的好方法，而且你不需要担心图标的位置（文本之前还是之后），间距和垂直对齐都能够正常工作。我也遇到了这个错误，但不是在低分辨率下。所以我使用了
.button {display: inline-flex;
align-items: center;
}
感谢你的帖子 :D
我也是
我加载了测试用例，惊讶地发现 Chrome 中出现了垂直错位：文本没有居中。首先，我调整了按钮的显示和内部大小，但这没有用。将文本包装在不同的标签中并调整包装器的 css 也不起作用。然后，我把文本改为大写，以防下降字符是罪魁祸首。即使文本是大写的，它仍然太高了。我删除了 SVG，测试了混合大小写和全部大写的文本，它仍然错位。我把字体调整为 Arial，然后调整为 Verdana，这解决了问题，无论 SVG 是否存在。所以字体选择，或者至少从一台计算机到另一台计算机的字体显示方式会有所不同。
直到最近，我才知道
display: inline-flex这样的东西。这篇文章（如果正确的话）说
display: inline-flex;对按钮内的子元素没有影响，它只是使父元素以内联方式显示https://stackoverflow.com/questions/27418104/whats-the-difference-between-displayinline-flex-and-displayflex#27459133
那么，为什么它会在你的案例中起作用呢？
它在我的案例中起作用是因为它确实对“按钮内的子元素有影响”。但我从非 flex 容器（inline-block）切换到了 flex 容器（inline-flex）。
我注意到在我的几个使用图标的按钮中也有这种情况，我从未理解为什么… 现在我知道了，因为我一直把我的开发窗口放在我的 MacBook Pro 上，并在外接显示器上预览。我发现点击样式化的输入字段会导致它们在外接显示器上运行速度变慢。只要你把窗口移动到主显示器上，它们就会正常工作。
顺便说一句，你的徽标效果太棒了！向上滚动每次都能让我感到惊喜。就像你在到达楼层时电梯发出的声音一样。细节很到位！
我也遇到了同样的问题，发现它还取决于我使用的字体。我无法切换到不同的字体，所以我最终使用了一个
max-resolution媒体查询来添加一个边距，以使我的文本在低分辨率屏幕上对齐。每次我深入研究字体渲染问题时，我都会长出一根白头发。