Css 将网格显示为文本输入背景

我正在尝试设置文本输入的样式，以显示与文本对齐的“网格”，请参见下面的示例：

我使用固定宽度字体，固定字母间距。理论上，在每个浏览器上都可以获得相同的预期渲染效果，但众所周知，不同浏览器的字体显示方式不同

如果我在Firefox中得到正确的对齐，它在IE上不起作用。作为一种解决方法，我可以在IE和Firefox之间使用不同的CSS来显示稍微不同的背景图像。但即使在Firefox上，渲染似乎也取决于屏幕分辨率（我在4:3和16:9上得到了不同的结果）

有人知道我如何在文本和网格之间实现正确的对齐吗

---

谢谢

有一个变通方法，它可以在不考虑分辨率和浏览器的情况下工作

在div中取一个span和输入字段。显示span和输入字段相互重叠

现在创建一个“|”字符串，其字符间距和宽度与输入字段的字符间距和宽度相同。由于这些是重叠的，当用户输入时，它看起来就像一个网格

---

希望这能起作用。

您可以将此代码添加到css文件中：

letter-spacing: 24px;

---

在任何字符之后，你都会有间距，也可以用网格加上准备好的背景。

为每一个相邻的每一个字母/数字创建一个单独的<代码>输入<代码>字段，但是iBANS最多可以有29个字符，另外，我必须添加JavaScript从一个字段自动跳到另一个字段，在其他中间处理空空如也的字段，连接所有的值等似乎是相当费力的。。。