在IE中，下拉列表与dropbox的宽度相同（我希望我有意义），而在Firefox中，下拉列表的宽度根据内容而有所不同。
这基本上意味着我必须确保Dropbox足够宽以显示最长的选择。这使我的页面看起来很丑陋:(
此问题有解决方法吗？ 如何使用CSS为dropbox和下拉列表设置不同的宽度？
答案 0 :(得分：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>
Here is a jsfiddle example。希望这会有所帮助。
答案 1 :(得分：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控件的情况下执行此操作。你真正需要做的就是在select元素上放一个onmouseover =“this.style.width ='auto'”onmouseout =“this.style.width ='100px'”（或任何你想要的）。 YUI控件为它提供了很好的动画，但它没有必要。这个任务也可以用jquery和其他库完成（虽然我还没有找到明确的文档）
- 修改编辑：
IE对选择控件的onmouseout有问题（它不考虑将鼠标悬停在选项上的鼠标悬停选项上）。这使得使用mouseout非常棘手。第一个解决方案是迄今为止我发现的最好的解决方案。
答案 2 :(得分：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=''"
我试过，它对我有用。不需要其他任何东西。
答案 3 :(得分：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。
答案 4 :(得分：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中完美运行）
答案 5 :(得分：5)
在IE6 / IE7 / IE8中无法执行此操作。控件是由应用程序绘制的，IE浏览器根本不会这样绘制。你最好的办法是通过简单的HTML / CSS / JavaScript实现你自己的下拉菜单，如果下拉一个宽度和列表另一个宽度那么重要。
答案 6 :(得分：5)
如果你使用jQuery，那么试试这个IE选择宽度插件：
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
应用此插件使得Internet Explorer中的选择框看起来像在Firefox，Opera等中一样工作，允许选项元素以全宽打开而不会丢失固定宽度的外观和样式。它还在Internet Explorer 6和7中的选择框中添加了对填充和边框的支持。
答案 7 :(得分：4)
在jQuery中，这非常有效。假设下拉列表有id =“下拉列表”。
$(document).ready(function(){
$("#dropdown").mousedown(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
});
答案 8 :(得分：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.--%>
}
答案 9 :(得分：2)
这是执行此操作的最佳方式：
select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}
它与BalusC解决方案完全相同。 只有这个更容易。 ;）
答案 10 :(得分：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。此外，我将下拉列表包含在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>
当您的下拉菜单展开时，这会照顾其他元素移动到位。这里唯一的缺点是，当你选择时，menulist visual会消失，但是一旦你选择就会返回。
希望这有助于某人。
答案 11 :(得分：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');
}})
答案 12 :(得分：2)
检查一下..它不完美但它的工作原理只适用于IE而且不影响FF。我使用常规javascript formousedown来建立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%'"
答案 13 :(得分：2)
如果你想要一个简单的下拉菜单和/或没有过渡效果的弹出菜单，只需使用CSS ...你可以强制IE6支持：使用带有行为的.htc文件（css3hover？）悬停在所有元素上（仅限IE6）属性）在有条件附加的CSS文件中定义。
答案 14 :(得分：2)
可以使用完整的jQuery插件。它支持不间断的布局和键盘交互，请查看演示页面：http://powerkiki.github.com/ie_expand_select_width/
免责声明：我编写了那个东西，欢迎补丁答案 15 :(得分：1)
答案 16 :(得分：1)
jquery BalusC的解决方案由我改进。也用于：Brad Robertson的comment here。
将它放在.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');
})
}
}
答案 17 :(得分：0)
我不得不解决这个问题，并且曾经提出过一个非常完整且可扩展的解决方案，适用于IE6,7和8（显然与其他浏览器兼容）。 我在这里写了一篇关于它的文章：http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer
我认为我会为那些仍然遇到这个问题的人分享这个问题，因为上述解决方案都不适用于所有情况（在我看来）。
答案 18 :(得分：0)
在所有版本的IE，Chrome，FF＆amp; 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>
答案 19 :(得分：0)
您可以直接将样式添加到select元素：
<select name="foo" style="width: 200px">
因此，此选择项目将为200像素宽。
或者，您可以将类或id应用于元素并在样式表中引用它
答案 20 :(得分：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-indexed 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>
答案 21 :(得分：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中的每个下拉列表中添加一个下拉类
这里的技巧是使用专门的点击功能（我在Fire event each time a DropDownList item is selected with jQuery找到了它）。这里的许多其他解决方案都使用事件处理程序更改，它可以很好地工作，但如果用户选择与先前选择的选项相同的选项，则不会触发。
与许多其他解决方案一样，焦点和mousedown用于当用户将下拉列表置于焦点时，模糊是指用户点击它们时。
你可能还想在这里坚持某种浏览器检测，所以它只会影响即。它在其他浏览器中看起来并不坏
答案 22 :(得分：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:''}); });
});
答案 23 :(得分：0)
这似乎适用于IE6，似乎并没有打破其他人。另一个好处是它会在您更改下拉选项后自动更改菜单。
$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});
});
答案 24 :(得分：0)
hedgerwow链接（YUI动画解决方案）在第一个最佳答案中被打破，我猜域名已过期。我在代码到期之前复制了代码，所以你可以在这里找到它（代码的所有者可以通过再次上传来破坏任何版权，让我知道）
在同一篇博文中，我写了一篇关于使用YUI Button菜单创建一个完全相同的SELECT元素的方法。看看，如果这有帮助请告诉我！
答案 25 :(得分：0)
我们在asp：dropdownlist上有同样的事情：
在Firefox（3.0.5）中，下拉列表是下拉列表中最长项目的宽度，宽度类似600像素或类似。
答案 26 :(得分：0)
到目前为止还没有一个。不知道IE8但它不能在IE6＆amp; IE7，除非您使用javascript实现自己的下拉列表功能。有一些例子说明如何在网上进行，但我没有看到复制现有功能的好处。