Javascript div和textarea之间的文本宽度不匹配

我正在尝试创建一个textarea控件，其中可以提到其他用户。该功能与Facebook中的功能非常相似，实现也很相似。当用户键入“@”时，将显示一个下拉列表，从中可以选择用户，然后在文本区域中以高亮显示。为了能够在textarea中有选择地渲染高光，我使用了一个覆盖div来创建高光，该div具有相同的文本，但带有span标记

覆盖具有相同的宽度、相同的字体和字体大小、相同的字母间距、相同的行高等，以确保所有高光与文本区域中的文本正确对齐。覆盖div中的所有文本（高光本身除外）都是透明的，以避免在文本上渲染抗锯齿文本的瑕疵

这一切都很好，除了当有一个提及突出显示时，突出显示中的文本在某种程度上略小于文本区域中它下面的文本，这会导致非常轻微的不匹配。更糟糕的是，当存在多个高光时，这种小的不匹配会累积，有时会导致一条线在文本区域中而不是在div中缠绕，之后整个错觉就会消失

我已经验证了textarea、overlay和highlights中的文本的所有文本呈现选项都完全相同。所有字体、字号、字母间距、行高都相同，高光上没有边距、边框或填充物等。。我还查看了WebKit Inspector，查看是否遗漏了可能仍然影响文本呈现的任何属性，但找不到任何属性。简单地说，我无法解释这种细微的渲染差异来自何处

请注意，只要覆盖不包含任何高光，渲染差异就不会发生

我也尝试过只渲染叠加而不渲染文本区域（而不是让叠加在高光之外透明），但这有一个令人讨厌的副作用，那就是我再也看不到任何光标了

是否有一些CSS属性我可能仍然忽略了，或者是否有其他原因导致将文本拆分为多个跨距会导致文本的总宽度与不间断文本节点略有不同？如有任何建议，将不胜感激

更新：对于可能遇到此问题的任何其他人，如以下JSFIDLE所示：

.家长{
文本呈现：优化易读性；
位置：相对位置；
}
文本区{
边界：0；
颜色：#000；
调整大小：无；
}
.覆盖{
颜色：透明；
指针事件：无；
}
文本区域，.overlay{
字体系列：Helvetica，无衬线；
字体大小：12px；
左：10px；
字母间距：正常；
保证金：0；
填充：0；
位置：绝对位置；
顶部：10px；
宽度：200px；
}
.亮点{
背景色：#00f；
颜色：#fff；
}
汤姆·克莱恩、马克·范德维尔登和阿伦德·范比伦
汤姆·克莱恩、马克·范德维尔登和阿伦德·范比伦

---

这个问题可以通过在“textarea.overlay”规则中添加“text rendering:geometricsprecision”来解决。

似乎我自己找到了解决方案：在主体上有一个“text rendering:optimizesibility”的定义。在textarea上将其设置回“文本呈现：几何精度”修复了该问题。这之前不明显的原因是，WebKit Inspector没有在textarea上显示继承的文本呈现，即使它对（大多数？）其他继承属性显示继承的文本呈现。

虽然这是一个很好的描述，通过使用代码示例/jsfiddle-etcAKA-tl将上述内容浓缩成一系列简洁的要点，这个问题可能会得到更多的关注；dr@SW4…………我用小提琴更新了问题。我发现firefox的inspect元素更有用。这个答案节省了我很多时间。非常感谢。

<style type="text/css">
.parent {
    text-rendering: optimizeLegibility;
    position: relative;
}

textarea {
    border: 0;
    color: #000;
    resize: none;
}

.overlay {
    color: transparent;
    pointer-events: none;
}

textarea,.overlay {
    font-family: Helvetica,sans-serif;
    font-size: 12px;
    left: 10px;
    letter-spacing: normal;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 10px;
    width: 200px;
}

.highlight {
    background-color: #00f;
    color: #fff;
}
</style>
<div class="parent">
    <textarea>Tom Kleijn, Mark van der Velden and Arend van Beelen</textarea>

    <div class="overlay"><span class="highlight">Tom Kleijn</span>, <span class="highlight">Mark van der Velden</span> and <span class="highlight">Arend van Beelen</span></div>
</div>