在 Mozilla 和非 IE 浏览器中，如果选择列表选项的长度大于选择的宽度，它将显示出来。但在 IE 中，它会将选项裁剪为选择的宽度。
有没有办法让 IE 的选择行为与非 IE 浏览器一样？
【问题讨论】：
标签： html internet-explorer html-select
【讨论】：
我放置在一个表格单元格中，只是想保持与单元格相同的宽度。
$("#id" ).width($("#id" ).parent().width());
顺便说一句，感谢所有帖子，它对我有很大帮助。
【讨论】：
我在表格单元格中有选择，下面的代码对我有用：
.myClass{
width: 100%;//most of browsers
_width: auto;//ie6 hack
}
干杯
【讨论】：
for (i=1;i<=5;i++){
idname = "Usert" + i;
document.getElementById(idname).style.width = "100%";
}
当宽度显示不正确时，我使用这种方式显示下拉列表。
它适用于 IE6、Firefox 和 Chrome。
【讨论】：
这似乎在强制 IE 重新评估选择宽度方面效果很好。适用于 IE7 和 IE8。
if (jQuery.browser.msie) {
jQuery("#" + selectID).css("width", "100%").css('width', 'auto');
}
【讨论】：
我喜欢 26design 的解决方案，但它有两个缺陷：
在某些情况下，可能会触发两次 mouseover 事件，从而导致 origWidth 变量设置为“auto”，从而阻止选择恢复为原始大小。
如果下拉列表中的文本值不需要额外的空间，则选择实际上会缩小，这看起来很奇怪。
这个版本修复了这两个问题：
if($.browser.msie) {
/* IE obscures the option text for fixed-width selects if the text
* is longer than the select. To work around this we make the width
* auto whenever the drop down is visible.
*/
$("select.fixed-width").livequery(function(){
/* Use mousedown rather than focus because the focus event gets
* interrupted and the dropdown does not appear
*/
$(this)
.mousedown(function(){
if($(this).css("width") != "auto") {
var width = $(this).width();
$(this).data("origWidth", $(this).css("width"))
.css("width", "auto");
/* if the width is now less than before then undo */
if($(this).width() < width) {
$(this).css("width", $(this).data("origWidth"));
}
}
})
/* Handle blur if the user does not change the value */
.blur(function(){
$(this).css("width", $(this).data("origWidth"));
})
/* Handle change of the user does change the value */
.change(function(){
$(this).css("width", $(this).data("origWidth"));
});
});
}
在 IE6-8 中测试
【讨论】：
这是另一种对我有用的方法：
<style>
select.limited-width {
width: 200px;
position: static;
}
select.expanded-width {
width: auto;
position: absolute;
}
</style>
<select class="limited-width"
onMouseDown="if(document.all) this.className='expanded-width';"
onBlur="if(document.all) this.className='limited-width';"
onChange="if(document.all) this.className='limited-width';">
<option>A normal option</option>
<option>A really long option which messes everything up</option>
</select>
通过切换到 position:absolute，您可以从页面流中删除该元素，如果您在展开时发现选择框在移动，这会有所帮助。
我选择依靠嗅探 document.all 作为 IE 检查，因为它保持紧凑并避免需要单独的函数。如果这对您不起作用，请在 IE 条件 cmets 中定义一个函数并调用它。
一个小错误，如果您选择相同的元素，它不会再次缩小，直到您将焦点移动到另一个元素，我称之为功能;-)
【讨论】：
我有一个适合我的解决方案，所以我想我会继续发布它（底部有一些警告）。我敢肯定，这不是 jQuery 最有效的使用方式，但它正在按照我希望的方式工作。基本上，我有一个（显然）相当长的文本字符串的时区列表。
<!--[if IE]>
<script type="text/javascript">
$(document).ready(function() {
$("select.timeZone")
.mouseover(function() {
$(this)
.data("origWidth", $(this).css("width"))
.css("width", "auto")
.focus();
})
.mouseout(function() {
$(this)
.blur(function() {
$(this).css("width", $(this).data("origWidth"));
})
.change(function() {
$(this).css("width", $(this).data("origWidth"));
})
});
});
</script>
<![endif]-->
说明：
注意事项：
【讨论】：
确保选择列表的宽度始终与需要的宽度完全一样的最简单方法是允许浏览器设置它们的宽度，即不要自己设置宽度。这种“方法”（实际上是一种非方法，因为它涉及不做某事）将适用于所有曾经开发过的浏览器，甚至是 IE6。
【讨论】：
好的，这是我经过一段时间后想出的解决方案。它会根据子选项的最大宽度自动增加选择框的大小。
<script type="text/javascript">
window.onload = function()
{
var elem = document.getElementById('test');
var values = elem.length;
var biggest_value = 0;
var biggest_option = '';
for(var i = 0; i <= values; i++)
{
if (elem.options[i])
{
var len = elem.options[i].value.length;
}
if (biggest_value < len)
{
biggest_value = len;
biggest_option = elem.options[i];
}
}
document.getElementById('test').style.width = biggest_option.offsetWidth + 'px';
};
</script>
选择框：
<select id="test">
<option value="Hello">Hello</option>
<option value="Hello Again">Hello Again</option>
<option value="Hello Yet Again">Hello Yet Again</option>
</select>
【讨论】：
css:
.set_width { width:120px; }
html:
<select class="set_width"><option>one</option><option>two</option></select>
【讨论】：