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

Question

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

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

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

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

由于

Answer 1

有一种解决方法，无论分辨率和浏览器如何，它都可以正常工作。

在div中输入span和input字段。显示跨度和输入字段相互重叠。

现在创建一个'|'字符串具有与输入字段的字符相等的字符间距和宽度。由于它们是重叠的，当用户输入时它将看起来像一个网格。

希望这会奏效。

Answer 2

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

letter-spacing: 24px;

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