css - 为什么元素和它的边框之间有空格？

Question

将 svg 与 flexbox 或 grid 混合时发生。

请看这个简化的例子:

div {
  display: flex;
  width: 100%;
}

span {
  flex: initial;
}

svg {
  width: 0;
  height: 100%;
  border: 3px solid black;
  flex: auto;
}

<div>
  <span>Ala ma kota. A kot ma Alę</span>
  <svg>
    <rect height="100%" width="100%" fill="red"></rect>
  </svg>
</div>

问题的发生非常不一致(似乎取决于周围框的大小，而这又取决于屏幕大小和缩放 - 至少这是我的假设)，所以如果你看不到它让我告诉你我在这里看到的屏幕截图:

看到红色图像及其边框之间的虚假空白了吗？它是最右边的边框。

对于我的用例，这个空间不仅看起来很丑，而且几乎是 Not Acceptable :我正在尝试在游戏中实现一个健康栏，这个空间暗示该栏没有满，即使它是满的。

为什么会出现这个空间，有什么办法可以消除它吗？

(Firefox，如果这很重要。)

Answer 1

我试图在 Firefox 上调整大小，但没有运气来重现空白。放大和缩小时，我看到它在 chrome 上发生了事件。当我检查元素时，有一些奇怪的像素 float (例如:10.234px)。像素是普通屏幕中的最小单位，所以普通屏幕会出现上述奇怪的结果。在某些 Retina 设备中，它可能运行良好。

P/S:有一种棘手的方法可以摆脱它，当你的 Angular 色完全健康时，你将 svg 标签的背景颜色设置为“红色”，我试过这种方式并看到空白消失了.