Seleccionar el cuadro que trunca el texto cuando el tamaño de la fuente del cuerpo cambió mediante javascript en el documento preparado en IE 9

Question

IE 9 se comporta de manera bastante extraña para mí. Tengo un control de cambio de tamaño de fuente de página que guarda la configuración de los usuarios y luego, en el documento listo, establece el tamaño de fuente del cuerpo para ese tamaño. Funciona bien, el problema es que cuando se carga una página con menús desplegables, en IE 9, a veces el texto se corta.

He simplificado el código hasta este jsfiddle para demostrar. http://jsfiddle.net/z6Paz/3/

el 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> 

el css:

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

y la javascript:

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

}); 

alguien ha llegado a través de este extraño comportamiento? ¿hay una solución simple?

No ocurre en IE 8, ni en firefox, ni en safari, ni en cromo.

Answer 1

Las cajas de selección en IE sufren de una larga y desafortunada historia de errores extraordinarios.

En los días de IE6, el cuadro de selección era un control de OS ventana-a wrapper for the Windows Shell ListBox que existía en a separate MSHTML plane de la mayoría de otros contenidos.

En IE 7, el control era rewritten from scratch como un elemento intrínseco prestado directamente por el motor MSHTML. Esto ayudó con algunos de los errores más prominentes, pero parte de este desafortunado legado permanece. En particular: después de dibujar un cuadro de selección, los cambios a través del DOM no siempre se propagan como uno podría esperar.

Aquí, cada opción en la lista de selección se dibuja exactamente con el ancho correcto para el texto que contiene cuando se representa por primera vez el control. Cuando aumenta el tamaño del texto de la página, IE se propaga correctamente el cambio en el control de sí mismo, pero no ajusta el ancho de las opciones, por lo que el texto comienza overflowing to the next line:

Puedes solucionar este problema forzando una volver a pintar el cuadro de selección.Una forma de hacerlo es append a single space character to the select element:

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

Alternativamente, usted podría change the style attribute:

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

De éstos, la estrategia .append() tiene los efectos secundarios potenciales menor cantidad y hace cumplir mejor separación de estilo y comportamiento. (Su impacto esencial en DOM es nulo.)

Answer 2

Parece que expresar el tamaño de fuente en EMs es la causa. cambiar a píxeles y está bien. Probablemente esto sea un error en IE 9.

Answer 3

Intente usar el% para la escalabilidad. Consulte aquí para obtener documentación de em frente a %: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Answer 4

Parece un problema de IE9. Como solución alternativa, puede actualizar el tamaño de fuente css de select.

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

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

Answer 5

Esta es mi primera respuesta a una pregunta, pero encontré esta página porque he tenido el mismo problema.

Me di cuenta de que con solo agregar algo al valor en la barra de herramientas Dev, aparecía el texto, entonces lo que hacíamos era agregar y luego eliminar un poco de espacio en blanco, lo que está funcionando perfectamente.

Aquí está el área de nuestro código que hizo el trabajo:

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

espero que ayuda a alguien en el futuro