需要一种方法来强制重绘MSIE8中的<select> s

Question

使用(模拟)媒体查询我正在更改<select>页面中s的字体大小

我也遇到了其他浏览器的问题,但是我解决了暂时从DOM中分离元素并在很短的时间后重新附加它们的问题

但是对于MSIE8,我仍然遇到<option>s的高度问题,它等于max fontSize设置,即使它不再适用

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

预期结果:

的font-size同时从一个更大的字体大小切换到一个较小的一个被更新

但不是<option>s 的行高/高度

同时选择多个和选择一个

我怎样才能解决这个问题？

注意: <select> 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>

Answer 1

多年来,这对许多开发人员来说都是一个令人头痛的问题.我没有找到解决方法,没有使用替代标记以及JS和CSS的混合解决了这个问题.这是由于Internet Explorer中选择框设计的刚性.一旦<= IE8呈现了一个选择框,就不会像你找到的那样用类'和/或JS修改外观.即使在渲染上使用CSS修改选择框外观也非常有限,并且已经让许多开发人员寻找替代方案.谢天谢地,在IE的后续版本中(其中8比7好很多,但仍然非常缺乏)选择框更加可变.

我可以向您指出一些资源来支持这一点,其中一些资源在stackoverflow上.

• 在IE中设置select元素的高度
• IE字体大小减小不会导致选择高度降低
• 同样沮丧的开发者,请参阅第一个回复

关于这方面的许多问题在SO上也没有得到解答,再次由于这个原因,你想要解决问题的方法没有解决问题.

提供了大量的解决方法,所有这些都涉及以下几种技术.

• 使用<ul>'s,使用javascript看起来像选择框
• JS/jQuery解决方案,用上述和<div>基于解决方案的混合替换选择框

对于您的具体问题,如果您不采用IE的DOM替换技术,您将发现自己一直在敲打砖墙.

为您提供解决方案的一些资源,以及其他提及jQuery/javascript使用的答案.

• Twitter Bootstrap Dropdown
• Twitter风格下拉菜单
• 选择(图书馆)
• 选择框替换jQuery插件
• 自定义选择框jQuery插件

总之,如果不使用polyfill进行IE或采用全部选择框替换策略,我担心你的问题无法解决.

Answer 2

尝试访问选择上的 offsetHeight。它强制重绘。