4 回答
多年来，这一直是许多开发人员头疼的问题。在不使用替代标记以及 JS 和 CSS 混合的情况下，我发现没有解决此问题的解决方法。这是由于 Internet Explorer 中选择框设计的僵化。一旦 <= IE8 渲染了一个选择框，使用 class' 和/或 JS 修改外观实际上是不可能的，正如您所发现的那样。即使在渲染时使用 CSS 修改选择框的外观也是非常有限的，这让许多开发人员寻找替代方案。值得庆幸的是，在 IE 的更高版本中（其中 8 比 7 好得多，但仍然非常缺乏）选择框更加可变。
我可以为您指出一些支持这一点的资源，其中一些在 stackoverflow 上。
许多与此相关的问题也没有得到解答，同样出于这个原因，没有以您希望解决的方式解决问题。
有多种解决方法，只要它们都涉及以下几种技术。
- 使用
<ul>'s，样式看起来像带有 javascript 的选择框 - JS / jQuery 解决方案，用上述和
<div>基于解决方案的混合替换选择框
对于您的特定问题，如果您不采用 IE 的 DOM 替换技术，您会发现自己一直在碰壁。
为您提供解决方案的一些资源，以及此处提到使用 jQuery / javascript 的其他答案。
总之，如果不使用 IE 的 polyfill 或采用完全选择框替换策略，恐怕你的问题是无法解决的。
（注意：请忽略此答案，因为您的编辑建议不要使用克隆。如果有人遇到此问题并想进行克隆，请使用此答案，这就是我不删除答案的原因）。
如果您可以设法将克隆放置到选择标签中，即使附加了事件，因为当前实现几乎不可能获得所需的结果。这是使用代码的方法。
浏览器已检查： Chrome 28.0.0 Firefox 22.0 IE 7.0/8.0
- 使用克隆选择来管理所需的结果。
代码：
!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>
截图一：
截图二：
截图 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%，滚动条垂直条将不可见。解决方案：增加选择高度以使所有选项可见。
尝试访问 select 上的 offsetHeight。它强制重绘。