在Mozilla和非IE浏览器，如果选择列表的选项比选择的宽度更大的长度，它会显示出来。 但在IE浏览器，它会裁剪选择到选择的宽度。
有没有什么办法，使IE浏览器的选择行为要这样的非IE的浏览器？
Answer 1:
这似乎在迫使IE浏览器重新评估选择宽度很好地工作。 工程在IE7和IE8。
if (jQuery.browser.msie) {
jQuery("#" + selectID).css("width", "100%").css('width', 'auto');
}
Answer 2:
CSS：
.set_width { width:120px; }
HTML：
<select class="set_width"><option>one</option><option>two</option></select>
Answer 3:
我喜欢26design的解决方案，但它有2个缺陷：
在某些情况下有可能激发两次导致origWidth变量设置成“自动”防止选择永远恢复到原始大小的鼠标悬停事件。
如果在下拉文本值下降并不需要额外的空间，则选择缩小实际上这看起来很奇怪。
该版本修复了两个问题：
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
Answer 4:
我放在一个表格单元格，只是想保持与细胞相同的宽度。
$("#id" ).width($("#id" ).parent().width());
顺便说一句，感谢所有的职位，它帮助了我很多。
Answer 5:
OK所以这里是我很长一段时间后，想出解决方案。 它会自动增加选择框的基础上的子选项的最大宽度尺寸。
<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>
Answer 6:
确保选择列表总是完全一样宽，他们需要的是绝对最简单的方法是让浏览器设置其宽度，即没有自己设置的宽度。 该“方法”（其实是一个非方法，因为它涉及到不做某事）将于做过，甚至IE6每一个浏览器工作。
Answer 7:
我有一个对我工作的解决方案，所以我想我会继续和张贴（在底部的一些注意事项）。 这不是最有效的使用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]-->
描述：
- 只有IE浏览器有条件地设置。
- 该解决方案是由Chris Coyier（提供的脚本的修改版本http://css-tricks.com/select-cuts-off-options-in-ie-fix/ ）。
- 此外，该解决方案假定你和我一样，真的不关心IE6这么多。 基本功能是存在的，所以IE6浏览器仍然可以看到大部分的选择选项，提交表单等等，但我不能浪费时间试图安抚这个小亚群。
注意事项：
- 选择列表有一个固定的宽度它集中了。
- 的onmouseout，该列表必须被模糊或改变被设定大小之前回到原来的固定宽度。 我确信选择列表中是模糊的或者首先改变的原因，是因为以前，的onmouseout将尽快为您的鼠标左键选择框（这意味着你可以尝试选择一个选项火过，但你可以单击一个之前他们会消失）。
- 相反，在鼠标悬停焦点设置，以确保模糊事件被解雇正确。
Answer 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>
通过切换到的位置是：绝对的，你删除的页面流量，如果你发现当你展开它的选择框移动，这有助于元素。
我选择了依靠嗅探的document.all作为IE浏览器的检查，因为它保持它结构紧凑，避免了单独的函数的需要。 如果不为你工作，定义IE条件注释中的一个函数，并调用来代替。
一个小bug，如果你选择，直到您将焦点移到另一个元素，它将不会再次缩小相同的元素，我称它是功能;-)
Answer 9:
for (i=1;i<=5;i++){
idname = "Usert" + i;
document.getElementById(idname).style.width = "100%";
}
我用这样的方式来显示下拉列表时宽度不正确显示。
它的IE6，Firefox和Chrome浏览器。
Answer 10:
我在表格单元格中选择的和下面的代码并获得成功对我来说：
.myClass{
width: 100%;//most of browsers
_width: auto;//ie6 hack
}
干杯
Answer 11:
最好的解决办法说明如下： http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm
文章来源: HTML Select options width is cropped in IE. Any solutions?
