Zaznacz pole obcinania tekstu, gdy rozmiar czcionki zostanie zmieniony za pomocą javascript na gotowy dokument w IE 9

Question

IE 9 zachowuje się dla mnie dziwnie. Mam kontrolkę zmiany rozmiaru czcionki strony, która zapisuje ustawienia użytkowników, a następnie w gotowym dokumencie ustawia rozmiar czcionki ciała do tego rozmiaru. To działa dobrze, problem polega na tym, że kiedy strona z listami rozwijanymi ładuje się, w IE 9, czasami tekst jest odcięty.

Uprościliśmy kod do tego jsfiddle, aby zademonstrować. 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; 
} 

i javascript:

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

}); 

ma ktoś natknąć tego dziwnego zachowania? czy istnieje prosta naprawa?

Nie dzieje się to w IE 8, firefox, safari lub chrome.

Answer 1

Wybrane pola w IE cierpią na długą i niefortunną historię nadzwyczajnych błędów.

W dniach IE6, pole wyboru było okienkowym sterowaniem OS - a wrapper for the Windows Shell ListBox, które istniało w a separate MSHTML plane z większości innych treści.

W wersji IE 7 element sterujący to rewritten from scratch jako wewnętrzny element renderowany bezpośrednio przez silnik MSHTML. Pomogło to w niektórych bardziej widocznych błędach, ale część tego nieszczęśliwego dziedzictwa pozostaje. W szczególności: po narysowaniu pola wyboru, zmiany za pośrednictwem DOM nie zawsze rozprzestrzeniają się, jak można się spodziewać.

W tym miejscu każda opcja na liście wyboru jest rysowana do dokładnie odpowiedniej szerokości dla tekstu, który zawiera, gdy formant jest po raz pierwszy renderowany. Kiedy można zwiększyć rozmiar tekstu strony, IE poprawnie propaguje zmiany do samej kontroli, ale nie regulować szerokość opcji, więc tekst zaczyna overflowing to the next line:

Można rozwiązać ten problem poprzez zmuszanie odświeżyć pole wyboru.Jednym ze sposobów, aby to zrobić jest append a single space character to the select element:

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

Alternatywnie, można change the style attribute:

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

Spośród nich strategia .append() ma najmniejszą liczbę potencjalnych skutków ubocznych i wymusza lepszą separację styl i zachowanie. (Istotny wpływ na DOM ma zero).

Answer 2

Wygląda na to, że przyczyną jest wyrażenie rozmiaru czcionki w EM. zmienić na piksele i wszystko jest w porządku. To prawdopodobnie błąd w IE 9.

Answer 3

Spróbuj użyć% dla skalowalności. Zobacz tutaj, aby zapoznać się z dokumentacją: em vs %: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Answer 4

Wygląda na IE9. Aby obejść ten problem, można odświeżyć css rozmiaru czcionki select.

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

Przykład. http://jsfiddle.net/z6Paz/16/

Answer 5

To jest moja pierwsza odpowiedź na pytanie, ale znalazłem tę stronę, ponieważ miałem ten sam problem.

Zauważyłem, że po prostu dodając cokolwiek do wartości na pasku narzędziowym Dev, pojawił się tekst, więc to, co zrobiliśmy, zostało dodane, a następnie usunięto trochę białej przestrzeni, która działa idealnie.

Oto obszar naszego kodu, który spełnił swoje zadanie:

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

Mam nadzieję, że ktoś pomoże w przyszłości