Answers:
这是另一个基于jQuery的示例。与此处发布的所有其他答案相反，它考虑了所有键盘和鼠标事件，尤其是单击：
if (!$.support.leadingWhitespace) { // if IE6/7/8
$('select.wide')
.bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
.bind('click', function() { $(this).toggleClass('clicked'); })
.bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
.bind('blur', function() { $(this).removeClass('expand clicked'); });
}
结合使用这段CSS：
select {
width: 150px; /* Or whatever width you want. */
}
select.expand {
width: auto;
}
您需要做的就是将类添加wide到有问题的下拉元素中。
<select class="wide">
...
</select>
这是一个jsfiddle示例。希望这可以帮助。
width: auto !important;
创建自己的下拉列表比它的价值更大。您可以使用一些JavaScript使IE下拉工作。
它使用了一点点的YUI库和一个特殊的扩展来修复IE选择框。
您将需要包括以下内容，并将您的<select>元素包装在<span class="select-box">
将它们放在页面的body标签之前：
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
</script>
<script src="ie-select-width-fix.js" type="text/javascript">
</script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
</script>
验收后编辑：
您也可以在没有YUI库和Hack控件的情况下执行此操作。您真正需要做的就是在select元素上放置onmouseover =“ this.style.width ='auto'” onmouseout =“ this.style.width ='100px'”（或任何您想要的东西）。YUI控件为它提供了很好的动画，但这不是必需的。也可以使用jquery和其他库来完成此任务（尽管我还没有找到明确的文档）
-编辑修改：
IE在选择控件的onmouseout上存在问题（它不认为选项上的鼠标悬停是选择上的鼠标悬停）。这使得使用mouseout非常棘手。到目前为止，第一个解决方案是最好的解决方案。
您可以尝试以下操作...
styleClass="someStyleWidth"
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}"
onblur="this.style.position='';this.style.width=''"
我尝试了，对我有用。没有其他要求。
我使用了以下解决方案，它似乎在大多数情况下都能正常工作。
<style>
select{width:100px}
</style>
<html>
<select onmousedown="if($.browser.msie){this.style.position='absolute';this.style.width='auto'}" onblur="this.style.position='';this.style.width=''">
<option>One</option>
<option>Two - A long option that gets cut off in IE</option>
</select>
</html>
注意：$ .browser.msie确实需要jquery。
@Thad还需要添加一个模糊事件处理程序
$(document).ready(function(){
$("#dropdown").mousedown(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
$("#dropdown").blur(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
});
但是，这仍会在单击时扩展选择框，而不仅仅是元素。（它似乎在IE6中失败，但在Chrome和IE7中完美运行）
在IE6 / IE7 / IE8中无法做到这一点。控件是由应用程序绘制的，而IE根本不会那样绘制它。最好的选择是通过一个简单的HTML / CSS / JavaScript实现自己的下拉菜单，如果下拉菜单中的一个宽度和列表中的另一个宽度非常重要。
如果您使用jQuery，请尝试使用此IE选择宽度插件：
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
应用此插件可使Internet Explorer中的选择框像在Firefox，Opera等中一样工作，方法是允许选项元素以全角打开，而不会失去固定宽度的外观和样式。它还在Internet Explorer 6和7的选择框中添加了对填充和边框的支持。
这是最简单的解决方案。
在开始之前，我必须告诉您下拉列表框将在除IE6之外的几乎所有浏览器中自动展开。因此，我将进行浏览器检查（即IE6），并将以下内容仅写入该浏览器。来了 首先检查浏览器。
该代码将神奇地扩展下拉选择框。解决方案的唯一问题是onmouseover，下拉列表将扩展为420px，并且由于overflow = hidden，我们将隐藏扩展的下拉列表大小并将其显示为170px。因此，ddl右侧的箭头将被隐藏，无法看到。但选择框将扩展为420px；这就是我们真正想要的。只需自己尝试以下代码，即可使用它。
.ctrDropDown
{
width:420px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:420px; <%-- this the width of the dropdown select box.--%>
}
<div style="width:170px; overflow:hidden;">
<asp:DropDownList runat="server" ID="ddlApplication" onmouseout = "this.className='ctrDropDown';" onmouseover ="this.className='ctrDropDownClick';" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';"></asp:DropDownList>
</div>
以上是IE6 CSS。所有其他浏览器的通用CSS应该如下。
.ctrDropDown
{
width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:auto; <%-- this the width of the dropdown select box.--%>
}
检查一下..它不是完美的，但是它可以工作，并且仅用于IE，不会影响FF。我使用onmousedown的常规javascript建立仅IE修复..但jquery中的msie也可以在onmousedown中使用。.主要思想是“ onchange”和on blur使选择框恢复正常。决定您自己的宽度。我需要35％。
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}"
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"我已经从别人的东西中拿走了一些东西。
$(document).ready(function () {
if (document.all) {
$('#<%=cboDisability.ClientID %>').mousedown(function () {
$('#<%=cboDisability.ClientID %>').css({ 'width': 'auto' });
});
$('#<%=cboDisability.ClientID %>').blur(function () {
$(this).css({ 'width': '208px' });
});
$('#<%=cboDisability.ClientID %>').change(function () {
$('#<%=cboDisability.ClientID %>').css({ 'width': '208px' });
});
$('#<%=cboEthnicity.ClientID %>').mousedown(function () {
$('#<%=cboEthnicity.ClientID %>').css({ 'width': 'auto' });
});
$('#<%=cboEthnicity.ClientID %>').blur(function () {
$(this).css({ 'width': '208px' });
});
$('#<%=cboEthnicity.ClientID %>').change(function () {
$('#<%=cboEthnicity.ClientID %>').css({ 'width': '208px' });
});
}
});其中cboEthnicity和cboDisability是下拉菜单，其中选项文本比选择内容本身的宽度宽。
如您所见，我已经指定了document.all，因为这仅在IE中有效。另外，我将下拉菜单包含在div元素中，如下所示：
<div id="dvEthnicity" style="width: 208px; overflow: hidden; position: relative; float: right;"><asp:DropDownList CssClass="select" ID="cboEthnicity" runat="server" DataTextField="description" DataValueField="id" Width="200px"></asp:DropDownList></div>当下拉菜单扩展时，这可以照顾到其他元素移开的情况。唯一的缺点是菜单列表视觉效果在您选择时消失，但在选择后立即返回。
希望这对某人有帮助。
这是执行此操作的最佳方法：
select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}与BalusC解决方案完全相同。只有这样比较容易。;）
完整的jQuery插件可用。它支持不间断的布局和键盘交互，请查看演示页面：http : //powerkiki.github.com/ie_expand_select_width/
免责声明：我已将其编码，欢迎使用补丁
我改进了jQuery BalusC的解决方案。也用于：Brad Robertson 在这里的评论。
只需将其放在.js中，对您想要的组合使用宽泛类，不要伪造给它一个ID。在onload（或documentReady或其他）中调用该函数。
这么简单：)
它将使用您为组合定义的宽度作为最小长度。
function fixIeCombos() {
if ($.browser.msie && $.browser.version < 9) {
var style = $('<style>select.expand { width: auto; }</style>');
$('html > head').append(style);
var defaultWidth = "200";
// get predefined combo's widths.
var widths = new Array();
$('select.wide').each(function() {
var width = $(this).width();
if (!width) {
width = defaultWidth;
}
widths[$(this).attr('id')] = width;
});
$('select.wide')
.bind('focus mouseover', function() {
// We're going to do the expansion only if the resultant size is bigger
// than the original size of the combo.
// In order to find out the resultant size, we first clon the combo as
// a hidden element, add to the dom, and then test the width.
var originalWidth = widths[$(this).attr('id')];
var $selectClone = $(this).clone();
$selectClone.addClass('expand').hide();
$(this).after( $selectClone );
var expandedWidth = $selectClone.width()
$selectClone.remove();
if (expandedWidth > originalWidth) {
$(this).addClass('expand').removeClass('clicked');
}
})
.bind('click', function() {
$(this).toggleClass('clicked');
})
.bind('mouseout', function() {
if (!$(this).hasClass('clicked')) {
$(this).removeClass('expand');
}
})
.bind('blur', function() {
$(this).removeClass('expand clicked');
})
}
}我们在asp：dropdownlist上有同样的事情：
在Firefox（3.0.5）中，下拉列表是下拉列表中最长项目的宽度，例如600像素宽或类似的宽度。
最好的答案中的hedgerwow链接（YUI动画变通方法）已损坏，我猜该域已过期。我在代码过期之前复制了代码，因此您可以在这里找到它（代码所有者可以通过再次上传将其告知我是否侵犯了版权）
在同一篇博客文章中，我写了一篇关于使用YUI Button菜单制作与普通元素完全相同的SELECT元素的文章。看看，让我知道是否有帮助！
基于Sai发布的解决方案，这就是使用jQuery的方法。
$(document).ready(function() {
if ($.browser.msie) $('select.wide')
.bind('onmousedown', function() { $(this).css({position:'absolute',width:'auto'}); })
.bind('blur', function() { $(this).css({position:'static',width:''}); });
});我以为我会戴上帽子。我制作了一个SaaS应用程序，并且在表中嵌入了一个选择菜单。此方法有效，但它扭曲了表中的所有内容。
onmousedown="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}
onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}"因此，我所做的一切都是为了将选择范围内的内容添加到Z索引div中。
<td valign="top" style="width:225px; overflow:hidden;">
<div style="position: absolute; z-index: 5;" onmousedown="var select = document.getElementById('select'); if(navigator.appName=='Microsoft Internet Explorer'){select.style.position='absolute';select.style.width='auto'}">
<select name="select_name" id="select" style="width: 225px;" onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}" onChange="reportFormValues('filter_<?=$job_id?>','form_values')">
<option value="0">All</option>
<!--More Options-->
</select>
</div>
</td>经过IE，Chrome，FF和Safari所有版本的测试
// JavaScript代码
<script type="text/javascript">
<!-- begin hiding
function expandSELECT(sel) {
sel.style.width = '';
}
function contractSELECT(sel) {
sel.style.width = '100px';
}
// end hiding -->
</script>// HTML代码
<select name="sideeffect" id="sideeffect" style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" >
<option value="0" selected="selected" readonly="readonly">Select</option>
<option value="1" >Apple</option>
<option value="2" >Orange + Banana + Grapes</option>我必须解决此问题，并且一旦想出了一个相当完整且可扩展的解决方案，可用于IE6、7和8（显然与其他浏览器兼容）。我在这里写了整篇文章：http : //www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer
认为我会为仍然遇到此问题的人们分享这一点，因为上述解决方案在每种情况下都无法起作用（我认为）。
我尝试了所有这些解决方案，但没有一个完全适合我。这就是我想出的
$(document).ready(function () {
var clicknum = 0;
$('.dropdown').click(
function() {
clicknum++;
if (clicknum == 2) {
clicknum = 0;
$(this).css('position', '');
$(this).css('width', '');
}
}).blur(
function() {
$(this).css('position', '');
$(this).css('width', '');
clicknum = 0;
}).focus(
function() {
$(this).css('position', 'relative');
$(this).css('width', 'auto');
}).mousedown(
function() {
$(this).css('position', 'relative');
$(this).css('width', 'auto');
});
})(jQuery);确保在HTML中的每个下拉菜单中添加一个下拉菜单类
这里的技巧是使用专门的click函数（每次使用jQuery选择DropDownList项目时，我都会在这里触发Fire事件）。这里的许多其他解决方案都使用事件处理程序更改，该更改效果很好，但如果用户选择与先前选择的选项相同的选项，则不会触发。
像许多其他解决方案一样，焦点和鼠标按下是针对用户将下拉列表置于焦点时，模糊是针对其单击时。
您可能还希望在其中保留某种浏览器检测功能，因此它仅会影响。虽然在其他浏览器中看起来还不错