javascript - textarea line-height 在 IE10 中没有立即应用

Question

我有以下情况，我有许多链接，每当其中一个单击 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 />

这是一段 JavaScript 代码

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

它在除 IE10 之外的所有浏览器中都能完美运行(未在 IE9 中测试，但它也是一个目标。)应用了 font-size 但 line-height 仅在 textarea 的值以某种方式更改后才生效。

here 是工作演示。

• 有什么解决方法吗？ (以编程方式删除和插入文本是最不受欢迎的)
• 是否有任何方法可以使 line-height 自动设置？

Answer 1

我刚刚找到了一个解决方法 (fiddle)。创建一个包装器 div，您可以在其中定义文本区域的尺寸。

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

然后用%定义textarea的大小:

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

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

现在将宽度旋转增加到 100.01%，然后将其减小回 100%。因为 IE 需要此更改才能运行(？？？)。

$(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+"%"
        });
    });
});

我认为这只是一个错误，我完全不知道为什么会这样。看起来很小的百分比范围内的变化无法计算为可用的像素值，因此不会导致视觉变化，但仍会触发文本框上所需的“更改事件”。我基于 an information in the msdn forums 开发了这个解决方案。