Выберите поле, усекающее текст, когда размер шрифта тела изменен с помощью javascript на документе, готовом в IE 9

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, сафари или хром.

Ответ 1

Выбирать боксы в IE страдают от долгой и неудачной истории необычных ошибок.

В дни IE6 поле выбора было оконным OS-управлением - оболочкой для Windows Shell ListBox, которая существовала в отдельная плоскость MSHTML из большинства других материалов.

В IE 7 элемент управления был переписан с нуля как неотъемлемый элемент, отображаемый непосредственно механизмом MSHTML. Это помогло с некоторыми более заметными ошибками, но некоторые из этих несчастных наследий остались. В частности: после выбора блока выбора изменения через DOM не всегда распространяются, как можно было бы ожидать.

Здесь каждый параметр в списке выбора нарисован точно равной ширине для текста, который он содержит, когда элемент управления сначала отображается. Когда вы увеличиваете размер текста страницы, IE правильно распространяет это изменение на сам элемент управления, но не корректирует ширину параметров, поэтому текст запускает переполняется до в следующей строке:

Вы можете исправить это, заставив перерисовку окна выбора. Один из способов сделать это - добавить один символ пробела в элемент select:

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

В качестве альтернативы вы можете изменить атрибут стиля:

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

Из них стратегия .append() имеет наименьшие потенциальные побочные эффекты и обеспечивает лучшее разделение стиля и поведения. (Его существенное влияние на DOM равно нулю.)

Ответ 2

Кажется, проблема IE9. В качестве обходного пути вы можете обновить CSS-размер шрифта select.

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

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

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

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

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

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