Select box truncating text when body font size changed via javascript on document ready in IE 9

Question

IE 9 is behaving quite strangely for me. I\'ve got a page font-size changing control that saves the users setting and then in the document ready sets the body font-size to

Answer 1

Select boxes in IE suffer from a long and unfortunate history of extraordinary bugs.

In the days of IE6, the select box was a windowed OS control—a wrapper for the Windows Shell ListBox that existed in a separate MSHTML plane from most other content.

In IE 7, the control was rewritten from scratch as an intrinsic element rendered directly by the MSHTML engine. This helped with some of the more prominent bugs, but some of this unhappy legacy remains. In particular: after a select box is drawn, changes via the DOM do not always propagate as one might expect.

Here, each option in the select list is drawn to exactly the right width for the text it contains when the control is first rendered. When you increase the text size of the page, IE correctly propagates the change to the control itself but does not adjust the width of the options, so text starts overflowing to the next line:

You can fix this by forcing a repaint of the select box. One way to do this is to append a single space character to the select element:

$('select').append(' ');

Alternatively, you could change the style attribute:

$('select').attr('style', '');

Of these, the .append() strategy has the fewest potential side effects and enforces better separation of style and behaviour. (Its essential impact on the DOM is nil.)

Answer 2

This is my first reply to a question, but I found this page because I have had the same problem.

I noticed that just by adding anything to the value in the Dev Toolbar, the text appeared, so what we did was add then remove some white space, which is working perfectly.

Here's the area of our code that did the job:

$('select').children().each(function() {
  $(this).html($(this).html() +'  ');
  $(this).html($(this).html());
});

I hope that helps someone in the future

Answer 3

Try using the % for scalability. See here for some documentation of em vs %: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Answer 4

It seems that expressing the font size in EMs is the cause. change to pixels and it's fine. This is probably a bug in IE 9.

Answer 5

Seems IE9 issue. As a workaround, you can refresh the font-size css of select.

if(jQuery.browser.msie)
 $("select").css("font-size", "1em")

Example. http://jsfiddle.net/z6Paz/16/