Javascript 强制textarea和pre元素的大小相同，并在IE中的相同点进行换行。

我目前正试图实现一个自动调整大小的textarea，它基于以下流行技术：

这个概念非常简单：你用一个支持的pre元素镜像一个textarea的输入。随着pre元素的大小调整，其容器和绝对定位的textarea也随之增长。这对我来说在Chrome、Safari和Firefox中也很好用

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

我设置这个来演示

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

这在Chrome/Safari中非常有效，但是当你开始在IE中玩的时候，文本在第一个包装点之后就会失去同步。在本演示中，字符串：

这里有一些文本。我们似乎做到了

应说明问题（即11）：

我们只在“We”上看到蓝色的前文本，因为textarea内容已经包装

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

我遇到过很多调整文本区域大小的javascript解决方案，但我希望这种CSS方法能够发挥作用，如果仅仅是为了学习的话

---

提前谢谢

你的问题是，IE中没有遵守速记

font

规则。如果你在IE的style inspector中查看它，你会发现它有下划线，至少在IE11中是这样。 只需在字体大小和字体系列值之间添加一个空格即可修复此问题

对于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;
}

---

你应该加上这个。

谢谢你的关注。我现在在IE中看到对齐的文本。但是，当文本换行并强制调整大小时，我仍然注意到IE中有一个简短的“闪光”。有什么想法吗？@thauburger IE制作了当新行溢出文本区域时，将文本向上提升一行的动画。我认为你无法改变这一点。但是，您可以通过使其比需要的高度更高来防止其发生，请参见：对于

200%

。不过，我不确定这对网站的其他部分有多好，抱歉。