Question

我想像这样渲染简单的CSS圈子：

.button {
  width:30px;
  height:30px;
  border-radius:15px;
  background-color:white;
}

没什么特别的。结果应该是这样的：

但是，Internet Explorer会像这样呈现：

看起来IE看起来像是在右侧和底部将元素切掉半个像素。

我已经玩过宽度，高度和边界半径变量，但是从来没有改进过。例如，尺寸根本不重要，在任何情况下都可以看到这种效果。 IE总是在右侧和底部切断半个像素。

奇怪的是，一个简单的SVG图像也是如此，就像那样的白色圆圈。

Internet Explorer（11）真的无法呈现任何类型的完美圆圈吗？

更新

我发现只有当元素位于子像素上时才会发生这种情况 - 例如当元素在视口等中居中时。

我在尝试在纯HTML + CSS文件中测试相同的东西而不是通过jsfiddle时注意到了这一点。我最初无法在那里重现它，直到我发现当元素相对定位时它才会发生。例如当您将元素居中或将其相对值设置为46.5％等时

效果可以在jsfiddle上看到，因为iframe的容器不是绝对像素值。

所以问题是：有没有办法以某种方式将元素定位在离散的像素值上？至少在dppx为1的屏幕上。