强制textarea和pre元素大小相同，并在IE中的相同点处包装。

Question

我目前正在尝试根据此处的常用技术实现自动调整大小的textarea：Alistapart: Expanding Textareas (2011)。

这个概念很简单：用镜像前置元素镜像textarea的输入。随着前部元素的调整，其容器和绝对定位的textarea随之生长。这对我来说非常适合Chrome浏览器，Safari（以及经过小填充调整here）Firefox。

然而，在现代版本的IE（9+）中，我遇到了一个问题。这种技术的关键是确保pre元素完全反映textarea的行为 - 不仅在大小上，而且在字体特征和包装点上。

我已将此JSFiddle设置为演示。

textarea的内容为红色，而pre的内容为蓝色。理想情况下，textarea的内容将直接位于pre的内容之上，并且只允许我们看到红色文本。

这在Chrome / Safari中效果很好，但是当你开始在IE中玩游戏时，文字会在第一个包装点左右后不同步。在本演示中，字符串：

Here's some text. It appears to do we

应说明问题（IE 11）：

我们只在“我们”看到蓝色预文字，因为textarea内容已经包装。

我是如何在IE中的textarea和后备pre元素之间保持文本同步的？我最初的想法是它与尺寸/字体差异有关，但经过几天的尝试后，它似乎更像是一个不一致的包装问题？

我遇到了很多用于调整文本区域大小的javascript解决方案，但是我希望能够使用这种CSS方法，只需要学习。

提前致谢！

Answer 1

您的问题是IE中没有遵守简写font规则。如果您在IE的样式检查器中查看它，您会看到它被加下划线，至少在IE11中。 只需在字体大小和字体系列值之间添加空格即可修复。的 See updated JSFiddle.

对于IE

font: 400 1em'Helvetica', 'Arial', sans-serif;

应该是

font: 400 1em 'Helvetica', 'Arial', sans-serif;

单引号是可选的，除非字体名称中包含空格或是CSS关键字。

应该消除包装问题，但我不认为你可以像在WebKit浏览器（Chrome / Safari）中那样完全隐藏基础的pre文本，这就是为什么你链接的文章表明你实际上是这样做的不可见的。

.expandingArea.active > pre {
  display: block;
  /* Hide the text; just using it for sizing */
  visibility: hidden;
}

你应该添加它。