css - 边框半径样式在具有不同操作系统的机器上产生具有不同边框的圆

Question

我正在使用 Selenium ChromeDriver 和 ImageMagick 比较工具测试我的 UI。我在机器池（Windows Server R2012）上捕获屏幕截图并与批准的图像进行比较（批准的图像在 Windows 10 上呈现）。我有几个用border-radius. 批准的和实际的圆圈边界不同。注意平面边框上的像素值。

所有关于平滑和抗锯齿的谷歌搜索都给了我关于仅禁用操作系统字体平滑的结果，这似乎不是我的情况（顺便说一句，我仍然在测试运行之前禁用 ClearType 和字体平滑）。

为什么边界不同？为了呈现相同的视图可以做什么？

我正在使用 Chrome 69.0.3497.92。我还注意到上面的操作系统，因为这是我在运行时环境之间看到的唯一明显区别。

图像由span以下样式生成。

min-width: 20px;
height: 20px;
border-radius: 17px;
box-sizing: border-box;
background-color: #ce0014;

标签： cssgoogle-chrome