Нужен способ принудительного перерисовки <select> s в MSIE8

с (имитируемыми) медиа-запросами Меняю размер шрифта <select> на моей странице

У меня также проблемы с другими браузерами, но я решил временно отделить элементы от DOM и повторно подключить их через небольшое количество времени

но с MSIE8 у меня все еще есть проблемы с высотой <option>, которая равна максимальному набору fontSize, даже если он больше не применяется

http://fiddle.jshell.net/U3bzT/show/light/

ожидаемый результат:

font-size обновляется при переключении с большего размера шрифта на меньший

, но не строка-высота/высота <option> s

происходит как с select-multiple, так и с select-one

как я могу это исправить?

Примечание. <select> могут иметь прикрепленные события, поэтому Я не могу использовать копию

<script>

// just some code to simulate media query on/off state
var select;

setTimeout(function(){

    select = document.getElementsByTagName("select")[0];

    select.style.fontSize='40px';
    webkitFix();

    setTimeout(function(){
        select.style.fontSize='10px';
        webkitFix();
    },5000);

},5000);

function webkitFix(){
    document.body.removeChild(select);
    setTimeout(function(){ document.body.appendChild(select); }, 1);
}

</script>

<select multiple size="6" style="font-size:10px">
    <option>AAAAAA1</option>
    <option>BBBBBB2</option>
    <option>AAAAAA3</option>
    <option>BBBBBB4</option>
    <option>AAAAAA5</option>
    <option>BBBBBB6</option>
    <option>AAAAAA7</option>
    <option>BBBBBB8</option>
    <option>AAAAAA9</option>
</select>

Ответ 1

Это и было большой головной болью для многих разработчиков на протяжении многих лет. Не существует обходного пути, который я когда-либо обнаружил, который исправил эту проблему, не используя альтернативную разметку вместе со смесями JS и CSS. Это связано с жесткостью дизайна окна выбора в Internet Explorer. После того как окно выбора было отображено с помощью <= IE8, изменение внешнего вида с помощью класса 'и/или JS на самом деле невозможно, как вы нашли. Даже изменение появления прямоугольников с CSS на рендеринге невероятно ограничено, и многие разработчики охотятся за альтернативами. К счастью, в более поздних версиях IE (из которых 8 намного лучше, чем 7, хотя все еще очень не хватает), выбор боксов намного более изменчив.

Я могу указать на несколько ресурсов, которые поддерживают это, ряд из которых находится в stackoverflow.

Множество вопросов, относящихся к этому, также остаются без ответа на SO, опять же по этой причине нет решения проблемы в том, как вы хотите ее решить.

Существует множество обходных решений, при условии, что все они включают в себя несколько следующих методов.

Использование <ul> 's, созданное для того, чтобы выглядеть как отдельные поля с javascript
Решения JS/jQuery, которые заменяют ящики выбора смесью вышеперечисленных и <div> решений

Для вашей конкретной проблемы вы окажетесь постоянно, стукнувшись головой о кирпичную стену, если вы не примете метод замены DOM для IE.

Некоторые ресурсы для вас, предлагающие решения, а также другие ответы здесь, в которых упоминается использование jQuery/javascript.

В заключение я боюсь, что вы проблема неразрешима без использования polyfill для IE или принятия общей стратегии замены блока выбора.

Ответ 2

(Примечание. Пожалуйста, проигнорируйте этот ответ, так как ваше изменение предполагает не использовать клон. Если кто-то сталкивается с этой проблемой и хочет пойти на клонирование, используйте это, поэтому я не удаляю свой ответ).

Если вам удастся поставить клон для выбора тега, даже если события привязаны, как только желаемый результат практически невозможен при текущей реализации. Вот подход с кодом.

Браузер отмечен: Chrome 28.0.0 Firefox 22.0 IE 7.0/8.0

Используется для выбора желаемого результата для клонирования.

CODE:

!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='/js/lib/dummy.js'></script> 

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
  </style>    

<script type='text/javascript'>

window.onload=function(){
var select;

function webkitFix(){
    document.body.removeChild(select);
    setTimeout(function(){ document.body.appendChild(select); }, 1);
}

setTimeout(function(){
    select = document.getElementsByTagName("select")[0];        
    select.style.fontSize='40px';       
    webkitFix();


    setTimeout(function(){
    select.style.visibility = 'hidden';
    select1 = document.getElementsByTagName("select")[0];
    select1.style.visibility = 'visible';    
    select1.style.fontSize='10px';
    webkitFix();
    },5000);

},5000);
}     
</script>  

</head>
<body>
  <select id="one" multiple size="6" style="font-size:10px;">
    <option value="AAAAAA1">AAAAAA1</option>
    <option value="BBBBBB2">BBBBBB2</option>
    <option>AAAAAA3</option>
    <option>BBBBBB4</option>
    <option>AAAAAA5</option>
    <option>BBBBBB6</option>
    <option>AAAAAA7</option>
    <option>BBBBBB8</option>
    <option>AAAAAA9</option>
</select>

<select id="two" multiple size="6" style="font-size:10px; position:absolute; visibility:hidden;">
    <option value="AAAAAA1">AAAAAA1</option>
    <option value="BBBBBB2">BBBBBB2</option>
    <option>AAAAAA3</option>
    <option>BBBBBB4</option>
    <option>AAAAAA5</option>
    <option>BBBBBB6</option>
    <option>AAAAAA7</option>
    <option>BBBBBB8</option>
    <option>AAAAAA9</option>
</select>      
</body>

Снимок экрана 1:

Снимок экрана 2:

Снимок экрана 3:

Ответ 3

Я пробовал так много вещей, height, line-height, offsetHeight, padding, margin, word-spacing, letter-spacing, white-space, text-indent, -ms-word-break, -ms-word-wrap, line-break и многие другие.. даже пытался понять IE hasLayout свойство и как сделайте некоторое обходное решение, эта ошибка/проблема IE8 кажется нефиксируемой.

Если вы не хотите использовать плагин, как это предлагал @DavidBarker, ни вы не хотите клонировать/копировать исходный раскрывающийся список, как то, что @Akki619, вот самое лучшее, что я мог бы придумать:

if($isIE8) {// alternative solution for IE8


    setTimeout(function() {
        var w = parseInt(select.style.width, 10);
        var h = parseInt(select.style.height, 10);
        // change select zoom rather than changing the font-size (since font-size is buggy)
        //select.style.fontSize = '40px';
        select.style.zoom = '400%';// almost equal to '40px'
        var longestOptionText = 1;
        // for the below, I used jquery to get the longest option text, you might replace it with some javascript
        $('select option').each(function() {
            var txtlen = $(this).text().length;
            if(txtlen > longestOptionText) {
                longestOptionText = txtlen;
            }
        });
        // -------- end of jquery usage
        select.style.width = (parseInt(select.style.fontSize, 10) * longestOptionText) + 'px';
        select.style.height = (parseInt(select.style.fontSize, 10) * longestOptionText) + 'px';
        setTimeout(function() {
            //select.style.fontSize = '10px';
            select.style.zoom = '100%';
            select.style.width = w + 'px';
            select.style.height = h + 'px';
        }, 5000);
    }, 5000);


} else {// all other browsers

    // keep your original code here..

}

Результат будет похож на то, что вы ожидаете, но теперь есть небольшая проблема, если масштаб увеличен до 100%, вертикальная панель скроллера не будет видна. Решение. Увеличьте высоту выбора, чтобы просмотреть все параметры.

Ответ 4

Попробуйте получить значение offsetHeight при выборе. Это заставляет перерисовать.