Html Internet explorer在文本区域中包装与div不同的单词

在InternetExplorer中（在IE10中测试），它看起来像是在文本区域内，一个单词后的空格被视为是单词本身的一部分。请参阅以下图片：

在左侧，您可以看到textarea，在右侧，您可以看到一个与textarea内容相同的div。在第一幅图中，正如所料，“vero”一词与“voluptua”一行非常吻合。然后，在添加另一个单词（甚至只是一个空格）后，“vero”出现在一行新的内容中。但是只在textarea中，而不是在div中。我想计算textarea的高度，所以对我来说很重要的一点是，单词的包装/破坏行为是相同的

我已经尝试给textarea和div赋予相同的换行、空格、换行、-ms-word-break、word-break和-ms-hyphens属性，但没有任何积极的结果

是否有人必须处理这个问题并找到解决办法

$(function() {  
    var txt = $('#comments'),  
        hiddenDiv = $(document.createElement('div')),  
        content = null;  

    txt.addClass('txtstuff');  
    hiddenDiv.addClass('hiddendiv common');  

    $('body').append(hiddenDiv);  

    txt.on('keyup', function () {  

        content = $(this).val();  

        content = content.replace(/\n/g, '<br>');  
        hiddenDiv.html(content + '<br class="lbr">');  

        $(this).css('height', hiddenDiv.height());  

    });​  
});  

        textarea {  
        width: 500px;  
        min-height: 50px;  
        font-family: Arial, sans-serif;  
        font-size: 13px;  
        color: #444;  
        padding: 5px;  
    }  

    .noscroll {  
        overflow: hidden;  
    }  

.hiddendiv {  
    display: none;  
    white-space: pre-wrap;  
    width: 500px;  
    min-height: 50px;  
    font-family: Arial, sans-serif;  
    font-size: 13px;  
    padding: 5px;  
    word-wrap: break-word;  
}