具有不同字体和高度线大小的文本区域中的光标位置答案

【问题标题】：Cursor position in textarea with different font and height-line size具有不同字体和高度线大小的文本区域中的光标位置
【发布时间】：2012-10-17 16:27:39
【问题描述】：

我尝试为 textarea 控件设置字体大小（13px）和行高大小（23px）。

<TEXTAREA style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 23px; height: 70px;"></TEXTAREA>

如果我在空白文本区域内单击，光标将位于正确的位置。

但在这段代码中，我包含样式 background-color: (http://jsfiddle.net/4e2dL/)

<TEXTAREA style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 23px; height: 70px;"></TEXTAREA>

我只添加了一种样式background-color: white;。因此，如果我尝试在 textarea 内单击，光标的位置将与第一个代码中不同（略高）。但是如果我开始输入一些文本，光标会移动到正确的位置。

如果我需要使用这种风格，如何避免这种情况？

问题出现在 IE 9 中。Chrome（最新版）没问题。

如果我使用样式 background-image: none;

也会导致同样的问题

谢谢！

【问题讨论】：

【解决方案1】：

您可以尝试删除 HERE 之间的空格或换行

可能是因为这个原因。

【讨论】：

【解决方案2】：

这只是一个 IE9 问题，看起来当您添加背景样式时，它也会覆盖和删除一些其他标准 IE9 样式。

解决方案，您需要更明确地使用样式以帮助规范影响 textarea 的样式，我已经将一个示例放在一起，其中 textarea 的样式已被 css 样式完全覆盖以将两个内联：http://jsfiddle.net/PXgxU/2/

【讨论】：