jQuery UI Slider, IE9, line-height issue

jQuery UI Slider, IE9, line-height issue

I am making a textbox with adjustable font via a slider. It works perfect
in every browser (Chrome, Safari, Firefox), except IE9 and IE10 I believe.
It even works in IE8.
I have the slider change the font-size and the line-height:
$("#slider").slider({
min:10,
max:40,
step:2,
value:16,
slide:function(e,ui){
$("#ta").css({'font-size':ui.value+'px','line-height':(ui.value+4)+'px'});
}
});
When I adjust it in Chrome, it looks like this:

IE9 looks like this:
Any clue how to get the line-height to actually work with the slider in IE9?
Fiddle: http://jsfiddle.net/qc9Xu/