在IE中的下拉列表宽度
在IE中，下拉列表的宽度和下拉列表的宽度相同（我希望我能理解），而在Firefox中，下拉列表的宽度因内容而异。
这基本上意味着我必须确保Dropbox的宽度足以显示最长的select。 这使得我的网页看起来很丑陋:(
有没有解决这个问题的方法？ 如何使用CSS为Dropbox和下拉列表设置不同的宽度？
这里是另一个基于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的例子 。 希望这可以帮助。
创build你自己的下拉列表是比它的价值更痛苦。 你可以使用一些JavaScript来使IE下拉工作。
它使用了一些YUI库和一个特殊扩展来修复IEselect框。
您将需要包含以下内容并将<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>
post接受编辑：
你也可以做到这一点，没有YUI库和黑客控制。 你真正需要做的就是在select元素上放置一个onmouseover =“this.style.width ='auto'”onmouseout =“this.style.width ='100px'”（或者任何你想要的）。 YUI控件给出了很好的animation，但没有必要。 这个任务也可以用jQuery和其他库来完成（虽然我还没有find明确的文档）
– 修改编辑：
IE在select控件的onmouseout时遇到了问题（它不考虑在选项上的鼠标hover选项上的鼠标hover）。 这使得使用鼠标非常棘手。 第一个解决scheme是迄今为止我find的最好的解决scheme。
你可以试试以下…
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=''"
我试过了，它对我有用。 没有其他要求。
我使用了以下解决scheme，似乎在大多数情况下运行良好。
<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"); } }); });
但是，这仍然会扩大点击select框，而不是仅仅是元素。 （它似乎在IE6中失败，但在Chrome和IE7中完美工作）
在IE6 / IE7 / IE8中没有办法做到这一点。 该控件是由应用程序绘制，IE浏览器根本不会这样画。 你最好的select是通过简单的HTML / CSS / JavaScript实现你自己的下拉菜单，如果下拉一个宽度和列表的宽度是非常重要的话。
如果你使用jQuery然后尝试这个IEselect宽度插件：
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
应用这个插件使Internet Explorer中的select框看起来像在Firefox，Opera等中工作一样，通过允许选项元素以全宽度打开而不会损失固定宽度的外观和样式。 它还在Internet Explorer 6和7的select框中添加了对填充和边框的支持。
在jQuery中，这工作得很好。 假设下拉列表有id =“dropdown”。
$(document).ready(function(){ $("#dropdown").mousedown(function(){ if($.browser.msie) { $(this).css("width","auto"); } }); $("#dropdown").change(function(){ if ($.browser.msie) { $(this).css("width","175px"); } }); });
这是最简单的解决scheme！ 在我开始之前，我必须告诉你下拉select框会自动扩展几乎所有的浏览器，除了IE6.so ..我会做一个浏览器检查[即，IE6]，并只写入以下浏览器。这里去..第一检查浏览器
该代码将神奇地扩展下拉select框。该解决scheme的唯一问题是onmouseover下拉将扩大到420px ..因为overflow = hidden我们隐藏了展开的下拉大小，并显示为170px;所以，箭头在ddl的右侧将被隐藏并且不能被看见。 但是select框会扩大到420px; 这是我们真正想要的。 只是尝试下面的代码为自己，如果你喜欢它使用它。 干杯。
.ctrDropDown {width：420px; } .ctrDropDownClick {width：420px; }
以上是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.--%> }
如果你想要一个简单的下拉和/或popup菜单没有过渡效果只使用CSS …你可以强制IE6支持：hover在所有元素使用.htc文件（css3hover？）的行为（仅IE6属性）定义有条件的附加CSS文件。
检查了这..这不是完美的，但它的工作原理，只适用于IE浏览器，并不影响FF。 我用onmousedown的常规JavaScript来build立IE只修复..但从jquery msie也可以在onmousedown ..主要的想法是“onchange”和模糊，使select框恢复正常..决定你自己的宽度。 我需要35％。
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}" onchange="this.style.width='35%'" onblur="this.style.width='35%'"
上面的BalusC的答案很好，但是如果你的下拉列表的内容比你在CSS中定义的宽度小select.expand的话，我会添加一个小的修正，把这个添加到mouseover bind：
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked'); if ($(this).width() < 300) // put your desired minwidth here { $(this).removeClass('expand'); }})
这是我从别人的东西中汲取的东西。
$(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' }); }); } });
其中cboEthityity和cboDisability是选项文本的下拉宽度，比select本身的宽度更宽。
正如你所看到的，我已经指定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时，menulist的视觉会消失，但是一旦您select，就会立即返回。
希望这有助于某人。
jquery BalusC的解决scheme得到了改进。 也使用：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'); }) } }
这是做到这一点的最好方法：
select:focus{ min-width:165px; width:auto; z-index:9999999999; position:absolute; }
它和BalusC解决scheme完全一样。 只有这样更容易。 ;）
一个完整的jQuery插件可用。 它支持非破坏性布局和键盘交互，请查看演示页面： http : //powerkiki.github.com/ie_expand_select_width/
免责声明：我编码的东西，补丁欢迎
您可以直接将样式添加到select元素：
<select name="foo" style="width: 200px">
所以这个select的项目将是200像素宽。
或者，您可以将类或id应用于元素，并在样式表中引用它
到目前为止，没有一个。 不知道IE8，但它不能在IE6和IE7，除非你实现自己的下拉列表function与JavaScript。 有一些例子是如何在networking上做到这一点的，尽pipe我没有看到重复现有function的好处。
我们在asp：dropdownlist上有同样的事情：
在Firefox（3.0.5）中，下拉是下拉菜单中最长项目的宽度，就像600像素宽或类似的东西。
这似乎与IE6的工作，并没有出现打破别人。 另一个好处是，只要您更改下拉select，它就会自动更改菜单。
$(document).ready(function(){ $("#dropdown").mouseover(function(){ if($.browser.msie) { $(this).css("width","auto"); } }); $("#dropdown").change(function(){ if ($.browser.msie) { $("#dropdown").trigger("mouseover"); } }); });
第一个最佳答案中的hedgerwow链接（YUIanimation变通）被破坏，我猜这个域名已经过期。 我在代码复制之前复制了代码，所以你可以在这里find它（代码的拥有者可以让我知道，如果我再次上传违反任何版权）
在同一个博客文章中，我写了关于使用YUIbutton菜单制作完全相同的SELECT元素（如正常的那样）。 看看，让我知道这是否有帮助！
基于Sai发布的解决scheme，这是如何使用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应用程序，并在表格中embedded了一个select菜单。 这个方法奏效了，但是它歪曲了桌子上的一切。
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内的select。
<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的所有版本中进行了testing
// 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>
我不得不解决这个问题，一旦想出了一个相当完整和可扩展的解决scheme，为IE6,7和8（显然兼容其他浏览器）工作。 我在这里写了一篇关于它的文章： http : //www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer
以为我会分享这个问题的人仍然遇到这个问题，因为没有上述解决scheme在任何情况下工作（在我看来）。
我尝试了所有这些解决scheme，没有完全为我工作。 这是我想出来的
$(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中的每个下拉菜单
这里的技巧是使用专门的点击function（ 每次使用jQueryselectDropDownList项目时，我都会在这里findFire事件 ）。 这里的许多其他解决scheme使用事件处理程序更改，这很好用，但如果用户select与之前select的选项相同的选项，则不会触发。
像许多其他解决scheme一样，当用户将下拉菜单放在焦点上时，焦点和mousedown是用于当鼠标点击时的模糊。
你也可能想在这里粘上某种浏览器检测，所以它只会影响ie。 但在其他浏览器中看起来并不糟糕
