在 IE 中，下拉列表的宽度与下拉框的宽度相同（我希望我说得通），而在 Firefox 中，下拉列表的宽度根据内容而有所不同。
这基本上意味着我必须确保保管箱足够宽以显示可能最长的选择。这使我的页面看起来很丑:(
这个问题有什么解决方法吗？如何使用 CSS 为下拉框和下拉列表设置不同的宽度？
NimsDotNet
问问题
100995 次
27 回答
102
这是另一个基于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 示例。希望这可以帮助。
于 2010-03-25T14:58:32.333 回答
14
创建自己的下拉列表比它的价值更痛苦。您可以使用一些 JavaScript 来使 IE 下拉菜单工作。
它使用了一些 YUI 库和一个特殊的扩展来修复 IE 选择框。
您将需要包括以下内容并将您的<select>元素包装在<span class="select-box">
将这些放在页面的正文标记之前：
<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 控件的情况下执行此操作。你真正需要做的就是在选择元素上放一个 onmouseover="this.style.width='auto'" onmouseout="this.style.width='100px'" （或任何你想要的）。YUI 控件为其提供了漂亮的动画，但这不是必需的。这个任务也可以用 jquery 和其他库来完成（虽然，我还没有找到明确的文档）
-- 对编辑的修正：
IE 在选择控件的 onmouseout 上有问题（它不认为鼠标悬停在选项上是鼠标悬停在选择上）。这使得使用鼠标悬停非常棘手。第一个解决方案是迄今为止我发现的最好的解决方案。
于 2008-09-16T17:00:15.293 回答
12
您可以尝试以下...
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=''"
我试过了，它对我有用。没有其他要求。
于 2010-06-03T19:48:38.367 回答
9
我使用了以下解决方案，它似乎在大多数情况下都能正常工作。
<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。
于 2009-09-05T17:31:03.760 回答
7
@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 中完美运行）
于 2009-06-24T08:19:44.147 回答
5
在 IE6/IE7/IE8 中没有办法做到这一点。该控件由应用程序绘制，而 IE 根本不会那样绘制它。最好的办法是通过简单的 HTML/CSS/JavaScript 实现自己的下拉菜单，如果下拉菜单的宽度和列表的宽度很重要的话。
于 2008-09-16T16:19:00.620 回答
5
如果你使用 jQuery，那么试试这个 IE 选择宽度插件：
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
应用此插件使 Internet Explorer 中的选择框看起来像在 Firefox、Opera 等中一样工作，允许选项元素以全宽打开，而不会丢失固定宽度的外观和样式。它还增加了对 Internet Explorer 6 和 7 中选择框的填充和边框的支持。
于 2010-09-21T11:50:10.667 回答
4
在 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");
}
});
});
于 2009-05-26T20:05:01.087 回答
3
这是最简单的解决方案。
在开始之前，我必须告诉你下拉选择框会在几乎所有浏览器中自动展开，除了 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.--%>
}
于 2009-10-14T20:42:34.190 回答
2
如果您想要一个没有过渡效果的简单下拉菜单和/或弹出菜单，只需使用 CSS...您可以强制 IE6 支持 :hover 使用 .htc 文件（css3hover？）在所有元素上定义的行为（仅限 IE6 属性）有条件附加的 CSS 文件。
于 2009-12-09T17:32:48.133 回答
2
看看这个..它并不完美，但它可以工作，它只适用于 IE，不会影响 FF。我使用常规 javascript 进行 onmousedown 来建立 IE 仅修复.. 但是来自 jquery 的 msie 也可以在 onmousedown 中使用.. 主要思想是“onchange”和模糊以使选择框恢复正常.. . 决定你自己的宽度。我需要 35%。
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}"
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"
于 2010-06-15T19:05:42.717 回答
2
BalusC 上面的回答效果很好，但是如果下拉列表的内容的宽度小于您在 CSS select.expand 中定义的宽度，我会添加一个小修复，将其添加到鼠标悬停绑定中：
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass('expand');
}})
于 2010-08-16T16:04:44.493 回答
2
这是我从其他人的东西中提取的东西。
$(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。此外，l 将下拉列表封装在 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>
当您的下拉菜单展开时，这会处理其他元素移出的位置。这里唯一的缺点是菜单列表视觉在您选择时消失，但在您选择后立即返回。
希望这可以帮助某人。
于 2011-06-17T17:20:21.800 回答
2
这是最好的方法：
select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}
它与 BalusC 解决方案完全相同。只有这样更容易。;)
于 2012-02-02T16:03:16.383 回答
2
一个完整的 jQuery 插件可用。它支持不间断的布局和键盘交互，查看演示页面： http: //powerkiki.github.com/ie_expand_select_width/
免责声明：我编写了那个东西，欢迎使用补丁
于 2012-08-20T11:47:53.107 回答
1
于 2009-12-09T11:53:18.430 回答
1
jquery BalusC 的解决方案由我改进。也使用：布拉德罗伯逊的评论在这里。
只需将它放在 .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');
})
}
}
于 2011-09-05T19:28:13.067 回答
0
您可以直接向 select 元素添加样式：
<select name="foo" style="width: 200px">
所以这个选择项将是 200 像素宽。
或者，您可以将类或 id 应用于元素并在样式表中引用它
于 2008-09-16T16:11:37.393 回答
0
到目前为止还没有。不了解 IE8，但不能在 IE6 和 IE7 中完成，除非您使用 javascript 实现自己的下拉列表功能。虽然我认为复制现有功能并没有多大好处，但网上有一些示例如何做到这一点。
于 2008-09-16T16:15:24.247 回答
0
我们在 asp:dropdownlist 上有同样的东西：
在 Firefox(3.0.5) 中，下拉列表是下拉列表中最长项目的宽度，例如 600 像素宽或类似的宽度。
于 2009-04-03T15:57:54.360 回答
0
第一个最佳答案中的hedgerwow 链接（YUI 动画解决方法）已损坏，我猜该域已过期。我在过期之前复制了代码，所以你可以在这里找到它（代码所有者可以让我知道我是否通过再次上传侵犯了任何版权）
在同一篇博客文章中，我写了关于使用 YUI 按钮菜单制作与普通元素完全相同的 SELECT 元素。看看，让我知道这是否有帮助！
于 2010-07-01T19:48:43.313 回答
0
这似乎适用于 IE6，并且似乎不会破坏其他人。另一个好处是，一旦您更改下拉选择，它就会自动更改菜单。
$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});
});
于 2010-07-21T19:46:40.437 回答
0
根据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:''}); });
});
于 2011-10-05T09:56:05.867 回答
0
我想我会把我的帽子扔进擂台。我制作了一个 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>
于 2012-02-08T20:07:47.190 回答
0
已在所有版本的 IE、Chrome、FF 和 Safari 中测试
JavaScript 代码：
<!-- begin hiding
function expandSELECT(sel) {
sel.style.width = '';
}
function contractSELECT(sel) {
sel.style.width = '100px';
}
// end hiding -->
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>
于 2012-05-08T11:47:45.040 回答
0
我不得不解决这个问题，并且曾经提出了一个非常完整且可扩展的解决方案，适用于 IE6、7 和 8（并且显然与其他浏览器兼容）。我在这里写了一篇关于它的整篇文章：http ://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer
以为我会与仍然遇到此问题的人分享此内容，因为上述解决方案都不适用于每种情况（在我看来）。
于 2012-06-27T23:10:54.797 回答
0
我尝试了所有这些解决方案，但没有一个完全适合我。这就是我想出的
$(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 中的每个下拉列表中添加一个下拉类
这里的技巧是使用专门的点击功能（我在这里找到了每次使用 jQuery 选择 DropDownList 项目时的 Fire 事件）。此处的许多其他解决方案都使用了事件处理程序更改，它运行良好，但如果用户选择与先前选择的选项相同的选项，则不会触发。
与许多其他解决方案一样，focus 和 mousedown 用于当用户将下拉菜单置于焦点时，blur 用于当他们点击离开时。
您可能还想在其中添加某种浏览器检测，因此它只会影响 ie。不过在其他浏览器中看起来还不错
于 2012-10-23T17:12:11.360 回答