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

Question

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

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

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

有没有人知道我如何才能在文本和网格之间完成正确的对齐？

谢谢

Answer 1

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

letter-spacing: 24px;

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

Answer 2

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

在你的 div 中取一个 span 和 input 字段。显示相互重叠的跨度和输入字段。

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

希望这会奏效。