Установите флажок усечения текста, когда размер шрифта основного текста был изменен с помощью JavaScript на документе, готовом в IE 9

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>

КСС:

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. В качестве обходного пути вы можете обновить css размера шрифта для select.

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

Пример. http://jsfiddle.net/z6Paz/16/

Answer 3

Попробуйте использовать% для масштабируемости. Смотрите здесь для некоторой документации em против %: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Answer 4

Это мой первый ответ на вопрос, но я нашел эту страницу, потому что у меня была такая же проблема.

Я заметил, что, просто добавив что-либо к значению на панели инструментов Dev, появился текст, поэтому мы добавили, а затем удалили пробелы, которые работают отлично.

Вот область нашего кода, которая выполнила работу:

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

Я надеюсь, что это поможет кому-то в будущем

Answer 5

Кажется, что причиной является размер шрифта в EM. изменить на пиксели, и это нормально. Это, вероятно, ошибка в IE 9.