Question

这是一个相当奇怪的问题，但请帮助我找到至少一个解决方案或可能性。

在我们的网站上，我们有一些带有居中＆＃34; +＆＃34;的圆形按钮，当点击时会打开一组其他按钮。

这些弹出按钮只有图标作为居中内容，每个按钮的宽度和高度均为24px。对于居中，我们使用left: 50%和top:50%以及transform:translate(-12px,-12px)的方法 - 除了flexbox方法之外通常的居中。

在我们所有的测试中，这些图标位于相当中心位置（当然，横向浏览器和交叉设备总是存在一些像素差异）。

现在剩下的最后一个问题是，在联想ThinkPad（选择的浏览器）上，图标远远不在他们应该的位置;像左边或底部5到6个像素。我们无法弄清楚到目前为止我们如何解决这个问题。

在任何其他设备上，让它成为笔记本电脑或固定的PC，安装相同的Windows和浏览器，它会按预期显示。

我现在的问题：有没有人知道为什么联想ThinkPad以不同方式显示这些图标？联想ThinkPad有不同的呈现方式，还是DPI或其他我们不知道的东西？

非常感谢您的答案。

Answer 1

你应该查看device pixel ratio 您的设备，即使您使用translate和正确的像素，也会在某些情况下导致问题。

此website可以帮助您了解详情。

使用媒体查询和可变像素比率定位它们：

@media only screen and (min-device-pixel-ratio: 2) {
      /* your code */
}

Answer 2

大家好，所有感兴趣的人，

我们在font-family中发现了这个问题：＆＃34; Material Icons＆＃34;。这个CSS在联想ThinkPad上添加了不自然的行为，在一些图标的右侧添加了奇怪的空白。

感谢您的建议和帮助:)非常感谢。