Seleziona la casella troncando il testo quando la dimensione del carattere del corpo è cambiata tramite javascript sul documento pronto in IE 9

Question

IE 9 si comporta in modo abbastanza strano per me. Ho un controllo di modifica della dimensione del carattere della pagina che salva l'impostazione degli utenti e quindi nel documento pronto imposta la dimensione del carattere del corpo a quella dimensione. Funziona bene, il problema è che, quando una pagina con i dropdown viene caricata, in IE 9, a volte il testo viene troncato.

Ho semplificato il codice a questo jsfiddle per dimostrarlo. 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> 

il css:

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

e il javascript:

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

}); 

qualcuno ha incontrato questo strano comportamento? c'è una soluzione semplice?

Non succede in IE 8, in Firefox, in Safari o in Chrome.

Answer 1

Le caselle di selezione in IE soffrono di una lunga e sfortunata storia di errori straordinari.

Nei giorni di IE6, la casella di selezione era un controllo OS con finestra - a wrapper for the Windows Shell ListBox che esisteva in a separate MSHTML plane dalla maggior parte degli altri contenuti.

In IE 7, il controllo era rewritten from scratch come un elemento intrinseco reso direttamente dal motore MSHTML. Ciò ha aiutato con alcuni dei bug più importanti, ma alcuni di questa eredità infelice rimane. In particolare: dopo aver disegnato una casella di selezione, le modifiche tramite DOM non si propagano sempre come ci si potrebbe aspettare.

Qui, ogni opzione nell'elenco di selezione viene disegnata esattamente alla larghezza corretta per il testo che contiene quando viene eseguito il primo rendering del controllo. Quando si aumenta la dimensione del testo della pagina, IE si propaga correttamente la modifica al controllo di sé, ma non regola la larghezza delle opzioni, in modo testo inizia overflowing to the next line:

È possibile risolvere questo forzando un riverniciare la casella di selezione.Un modo per farlo è quello di append a single space character to the select element:

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

In alternativa, si potrebbe change the style attribute:

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

Di questi, la strategia .append() ha il minor numero di potenziali effetti collaterali e applica una migliore separazione di stile e di comportamento. (Il suo impatto essenziale sul DOM è nullo.)

Answer 2

Sembra che esprimere la dimensione del carattere negli EM sia la causa. cambia in pixel e va bene. Questo è probabilmente un bug in IE 9.

Answer 3

Provare a usare% per scalabilità. Vedere qui per alcuni documenti di em vs %: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Answer 4

Sembra problema IE9. Come soluzione alternativa, è possibile aggiornare il css della dimensione del carattere di selezione.

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

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

Answer 5

Questa è la mia prima risposta a una domanda, ma ho trovato questa pagina perché ho avuto lo stesso problema.

ho notato che solo con l'aggiunta di tutto per il valore nel Dev barra degli strumenti, il testo è apparso, così quello che abbiamo fatto è stato aggiunge poi togliere un pò di spazio bianco, che è perfettamente funzionante.

Ecco l'area del nostro codice che ha fatto il lavoro:

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

Mi auguro che aiuta qualcuno in futuro