当在IE 9中准备好文档时通过javascript更改正文字体大小时,选择框截断文本

Question

IE 9对我来说表现得很奇怪.我有一个页面字体大小更改控件,用于保存用户设置,然后在文档就绪中将正文字体大小设置为该大小.它工作正常,问题是,当一个带有下拉列表的页面加载时,在IE 9中,有时文本被切断.

我已经将代码简化为这个jsfiddle以进行演示. http://jsfiddle.net/z6Paz/3/

html:

<select id="theSelect" name="theSelect" >                
     <option value="2"  >Letter ( 8.5 x 11&quot; )</option>    
     <option value="3" selected='selected'>A4 ( 8.27 x 11.69&quot; )</option>  
</select>

css:

select
{
    font-size:1em;
    width:240px;
}

和javascript:

var userPrefSizeOffset = 2;
$(function(){
    var currentFontSize = $('body').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize);
    $('body').css('font-size', currentFontSizeNum + userPrefSizeOffset);

});

有人遇到过这种奇怪的行为吗？有一个简单的解决方案吗？

它不会发生在IE 8,或firefox,safari或chrome中.

Answer 1

IE浏览器中的选择框遭受了长期和不幸的非常错误的历史.

在IE6的时代,选择框是一个窗口操作系统控件 - Windows Shell ListBox的包装器,它存在于与大多数其他内容不同的MSHTML平面中.

在IE 7中,控件从头开始重写为MSHTML引擎直接呈现的内部元素.这有助于解决一些更突出的问题,但其中一些不幸的遗产仍然存在.特别是:在绘制选择框之后,通过DOM的更改并不总是像人们预期的那样传播.

这里,选择列表中的每个选项都被绘制为在首次渲染控件时它包含的文本的正确宽度.当您增加页面的文本大小时,IE会正确地将更改传播到控件本身,但不会调整选项的宽度,因此文本开始溢出到下一行:

您可以通过强制重绘选择框来解决此问题.一种方法是在select元素中附加一个空格字符:

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

或者,您可以更改样式属性:

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

其中,该.append()策略具有最少的潜在副作用,并强制更好地分离风格和行为.(它对DOM的重要影响是零.)

Answer 2

似乎IE9问题.作为解决方法,您可以刷新select的font-size css.

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

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