textarea line-height在IE10中沒有立即應用

Question

我有以下情況，我有一些鏈接，並且每當其中一個點擊font-size和line-height css屬性時，相應地設置textarea。

這是一個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，您可以在其中定義textarea的尺寸。

<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開發了這種溶劑。

Answer 2

因爲如果你改變一些東西的line-height剛剛更新，讓我們給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不能測試，但會工作，我認爲。

jsFiddle

更新： 有很多醜陋的事情可以做。爲了使IE更新，我們需要實際上改變它的寬度，高度或文本。

所以你也可以這樣做this one：

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