Javascript 需要一种方法来强制重新绘制<；选择>；在MSIE8中有什么

通过（模拟）媒体查询，我正在更改页面中

s的字体大小

我也有其他浏览器的问题，但我解决了暂时从DOM中分离元素并在一小段时间后重新附加它们的问题

但是对于MSIE8，我仍然存在高度等于最大fontSize集的问题，即使它不再应用

预期结果：

当从大字体切换到小字体时，

字体大小

会被更新

但不是

s的行高/高度

“选择多个”和“选择一个”都会发生这种情况

我怎样才能解决这个问题

注意：

可能附加了事件，因此我不能使用副本

<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>

//只是一些模拟媒体查询开/关状态的代码
var选择；
setTimeout（函数（）{
select=document.getElementsByTagName（“select”）[0]；
选择.style.fontSize='40px'；
webkitFix（）；
setTimeout（函数（）{
选择.style.fontSize='10px'；
webkitFix（）；
},5000);
},5000);
函数webkitFix（）{
document.body.removeChild（选择）；
setTimeout（函数（）{document.body.appendChild（select）；}，1）；
}
AAAAA 1
BBBB2
AAAAA 3
BBBBBB4
AAAAA 5
BBBB6
AAAAA 7
BBBBBB8
AAAAA 9

尝试访问select上的offsetHeight。它迫使重新绘制。

这是一个问题，多年来一直是许多开发人员头疼的问题。我发现，如果不使用替代标记以及JS和CSS的混合，就没有解决这个问题的方法。这是由于Internet Explorer中选择框设计的刚性。呈现选择框后（注意：请忽略此答案，因为您的编辑建议不要使用克隆。如果有人遇到此问题并希望进行克隆，请使用此选项，这就是我不删除答案的原因）

如果您能够将克隆放置到select标记，即使事件按所需方式附加，当前实现几乎不可能实现此结果。下面是使用代码的方法

浏览器已选中：

Chrome 28.0.0

Firefox 22.0

IE 7.0/8.0

使用克隆选择来管理所需的结果

代码：

！DOCTYPE html>
-JSFIDLE演示
window.onload=function（）{
var选择；
函数webkitFix（）{
document.body.removeChild（选择）；
setTimeout（函数（）{document.body.appendChild（select）；}，1）；
}
setTimeout（函数（）{
select=document.getElementsByTagName（“select”）[0]；
选择.style.fontSize='40px'；
webkitFix（）；
setTimeout（函数（）{
select.style.visibility='hidden'；
select1=document.getElementsByTagName（“选择”）[0]；
选择1.style.visibility='visible'；
选择1.style.fontSize='10px'；
webkitFix（）；
},5000);
},5000);
}     
AAAAA 1
BBBB2
AAAAA 3
BBBBBB4
AAAAA 5
BBBB6
AAAAA 7
BBBBBB8
AAAAA 9
AAAAA 1
BBBB2
AAAAA 3
BBBBBB4
AAAAA 5
BBBB6
AAAAA 7
BBBBBB8
AAAAA 9

屏幕截图1:

屏幕截图2:

屏幕截图3:

---

我尝试了很多东西，

高度、行高、视线偏移、填充、边距、单词间距、字母间距、空白、文本缩进、-ms分词、-ms分词、换行等等。。即使试图理解IE属性以及如何解决一些问题，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%，滚动条垂直条将不可见。解决方案：增加“选择高度”使所有选项可见。
尝试将每个可能的CSS属性设置为接近零（不是零；有时它不喜欢零）。线高：1px；填充：1px；利润率：1倍。以及可能存在的任何其他间距属性。如果所有的文本几乎都堆积起来了，那么你找到了正确的属性。把它们一个接一个地移走，以识别罪犯。如果你不改变那些属性，那也没关系。不要低估浏览器可能会意外地对您造成的影响。您不使用jQuery有什么原因吗？@RobertMcKee:IE8 mode！=IE8如果您愿意，可以在IETester中复制try@WouterHuysentruit：IE8模式！==IE8#javascriptAnd通过访问，你的意思是阅读？因为你不能写
offsetHeight
Reading，是的。访问并不一定意味着写作。+1不需要投票否决，因为这是尽管。不管怎么说，都不起作用：（您可以在设置字体大小后调整缩放：1。如果需要，请告诉我。）works@ultraviol3tlux我无意成为精英主义者。但是，如果你在回答之前对此进行测试，你会发现它不起作用，唉……我不知道为什么在证据确凿的情况下会投反对票。至少你可以留下一条评论，说明为什么这是显而易见的显然不正确？这些IE问题让我想起了浮士德博士：«»。但问题是，选择框根本就不是很好，不管你使用什么浏览器：它们非常不灵活，没有什么比使用收音机、复选框和标记做得更好的了。一年前，推荐选择2（对所选问题的改进）。因此，这个问题实际上是以前提出的许多问题的重复
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..

}