Javascript textarea行高度在IE10中未立即应用

我有下面的场景，我有许多链接，每当其中一个单击相应文本区域的

font size

和

line height

css属性时

这是一个HTML

<textarea cols="50" id="Target" style="width:400px; height:200px;" rows="20"></textarea>
<br />
<a class="changer" href="javascript:;" data-size="10">10</a><br />
<a class="changer" href="javascript:;" data-size="20">20</a><br />
<a class="changer" href="javascript:;" data-size="30">30</a><br />
<a class="changer" href="javascript:;" data-size="40">40</a><br />

它在除IE10之外的所有浏览器中都能完美工作（IE9中没有测试过，但它也是一个目标。）应用

字体大小

，但

行高

仅在文本区域的值以某种方式更改后才生效

是正在运行的演示

• 有什么解决办法吗？（以编程方式删除和插入文本最不受欢迎）
• 是否有任何方法可以使

  行高度

  自动

---

因为如果您更改了某些内容，

行高度只会更新，所以让我们给IE一些东西来触发更新：

$(function(){
    $(".changer").click(function(){
        var size = $(this).data("size");
        var text = $("#Target").text(); //grab current text
        $("#Target").css({
            "font-size": size + "px",
            "line-height": (size + 5) + "px"
        }).text(text); //change text with text (same thing, just to trigger the update)
    });
});

在IE9和Chrome上测试。不幸的是，没有IE10进行测试，但我认为它会起作用


更新：
我们可以做很多丑陋的事情。要使IE更新，我们需要实际使其更改宽度、高度或文本

所以你也可以这样做：

我刚刚找到了一个解决方法（）。创建一个包装器div，在其中定义textarea的维度

<div id="txt_wrapper"><textarea id="Target">This is my text, it spans multiple lines. Line height is not applied immediately</textarea></div>

现在旋转将宽度增加到100.01%，然后将其减小到100%。因为IE需要这个改变来让它运行（？？？）

我认为这只是一个bug，我完全不知道为什么会这样。它看起来像一个很小的%范围内的变化，无法计算成可用的像素值，因此不会导致视觉变化，但仍会在文本框上触发所需的“更改事件”。我基于。
开发了此解决方案。那么，还有其他解决方法吗？正如我在问题中所说，这是最不可取的方法。真正的项目使用绑定到它的KnockoutJs。额外的div、额外的css、额外的
var
和
if/else
都是不需要的。。我想知道为什么在需要为一件简单的事情添加这么多东西的时候，这被接受了，就像我在回答中只调用了两次
.css（）
，chained。很抱歉，这么多不需要的东西。我只是尝试了不同的事情，结果是。你可能仍然是对的。我的答案被接受的原因可能是它比你的第二个解决方案来得早，因此OP allready离开了，这是非常常见的情况。
$(function(){
    $(".changer").click(function(){
        var size = $(this).data("size");
        $("#Target").css({
            "font-size": size + "px",
            "line-height": (size + 5) + "px",
            "width":$("#Target").width()+1
        }).css({
            "width":$("#Target").width()-1
        });
    });
});

<div id="txt_wrapper"><textarea id="Target">This is my text, it spans multiple lines. Line height is not applied immediately</textarea></div>

#txt_wrapper {
    width: 400px;
    height: 200px;
}

#txt_wrapper textarea {
    width: 100%;
    height: 100%;
}

$(function(){
    var changewidth = 100;
    $(".changer").click(function(){
        var size = $(this).data("size");
        if(changewidth == 100) changewidth = changewidth + 0.01;
        else changewidth = changewidth - 0.01;
        $("#Target").css({
            "font-size": size + "px",
            "line-height": (size + 5) + "px",
            "width": changewidth+"%"
        });
    });
});