关于javascript：IE中的下拉列表宽度

Dropdownlist width in IE

在IE中，下拉列表的宽度与下拉框的宽度相同(我希望我有道理)，而在Firefox中，下拉列表的宽度根据内容而有所不同。

这基本上意味着我必须确保该保管箱足够宽，以显示可能的最长选择。这使我的页面看起来非常难看:(

有没有解决此问题的方法？
如何使用CSS为Dropbox和DropdownList设置不同的宽度？

这是另一个基于jQuery的示例。与此处发布的所有其他答案相反，它考虑了所有键盘和鼠标事件，尤其是单击：

1
2
3
4
5
6
7

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：

1
2
3
4
5
6

select {
width: 150px; /* Or whatever width you want. */
}
select.expand {
width: auto;
}

您需要做的就是将类wide添加到有问题的下拉元素中。

1
2
3

这是一个jsfiddle示例。希望这可以帮助。

创建自己的下拉列表比它的价值更大。您可以使用一些JavaScript使IE下拉工作。

它使用了一点点的YUI库和一个特殊的扩展来修复IE选择框。

您将需要包括以下内容，并将

1
2
3
4
5
6
7
8
9
10
11

验收后编辑：

您也可以在没有YUI库和Hack控件的情况下执行此操作。您真正需要做的就是在select元素上放置onmouseover =" this.style.width ='auto'" onmouseout =" this.style.width ='100px'"(或任何您想要的东西)。 YUI控件为它提供了很好的动画，但这不是必需的。也可以使用jquery和其他库来完成此任务(尽管我还没有找到明确的文档)

-编辑修改：
IE在选择控件的onmouseout上存在问题(它不将选项上的鼠标悬停视为选择上的鼠标悬停)。这使得使用mouseout非常棘手。第一个解决方案是到目前为止找到的最好的解决方案。

您可以尝试以下操作...

1
2
3

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=''"

我尝试了，对我有用。没有其他要求。

我使用了以下解决方案，它似乎在大多数情况下都能正常工作。

1
2
3
4
5
6
7
8
9
10

注意：$ .browser.msie确实需要jquery。

@Thad还需要添加一个模糊事件处理程序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$(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的选择框中添加了对填充和边框的支持。

在jQuery中，效果很好。假设下拉菜单具有id =" dropdown"。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function(){

$("#dropdown").mousedown(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});

});

这是最简单的解决方案。

在开始之前，我必须告诉您下拉列表框将在除IE6之外的几乎所有浏览器中自动展开。因此，我将进行浏览器检查(即IE6)，并将以下内容仅写入该浏览器。来了首先检查浏览器。

该代码将神奇地扩展下拉选择框。解决方案的唯一问题是onmouseover，下拉列表将扩展为420px，并且由于overflow = hidden，我们将隐藏扩展的下拉列表大小并将其显示为170px。因此，ddl右侧的箭头将被隐藏并且无法看到。但选择框将扩展为420px；这就是我们真正想要的。只需自己尝试以下代码，即可使用它。

1
2
3
4
5
6
7
8
9
10
11

.ctrDropDown
{
width:420px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:420px; <%-- this the width of the dropdown select box.--%>
}

</asp:DropDownList>

以上是IE6 CSS。所有其他浏览器的通用CSS应该如下。

1
2
3
4
5
6
7
8

.ctrDropDown
{
width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:auto; <%-- this the width of the dropdown select box.--%>
}

如果您想要一个没有过渡效果的简单下拉菜单和/或弹出菜单，只需使用CSS ...即可强制IE6使用.htc文件(css3hover？)在行为中定义了(仅限IE6属性)在所有元素上支持：hover有条件附加的CSS文件。

检查一下..它不是完美的，但是它可以工作，并且仅用于IE，不会影响FF。我使用常规的javascript进行onmousedown来建立仅IE的修复..但来自jquery的msie也可以在onmousedown中使用。.主要思想是" onchange"和on blur使选择框恢复正常。。决定您自己的宽度。我需要35％。

1
2
3

onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}"
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"

这是执行此操作的最佳方法：

1
2
3
4
5
6

select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}

与BalusC解决方案完全一样。
只有这样比较容易。 ;)

BalusC的上述答案很好用，但是如果下拉列表的宽度小于CSS select.expand中定义的宽度，请添加一个小修正，将其添加到mouseover绑定中：

1
2
3
4
5

.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass('expand');
}})

完整的jQuery插件可用。它支持不间断的布局和键盘交互，请查看演示页面：http://powerkiki.github.com/ie_expand_select_width/

免责声明：我已将其编码，欢迎打补丁

我已经从别人的东西中拿走了一些东西。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

$(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元素中，如下所示：

1	</asp:DropDownList>

当下拉菜单扩展时，这可以照顾到其他元素移开的情况。唯一的缺点是菜单列表的视觉效果在您选择时消失，但在选择后立即返回。

希望这对某人有帮助。

我改进了jQuery BalusC的解决方案。也使用：Brad Robertson在这里的评论。

只需将其放在.js中，对您想要的组合使用wide类，并且不要伪造给它一个ID。在onload(或documentReady或其他)中调用函数。
这么简单的屁股:)
它将使用您为组合定义的宽度作为最小长度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

http://developer.yahoo.com/yui/examples/button/button-menu-select.html#

到目前为止，还没有一个。不了解IE8，但是除非您使用javascript实现自己的下拉列表功能，否则无法在IE6和IE7中完成。虽然在复制现有功能方面没有多大好处，但仍有一些示例可以在网络上实现。

我必须解决此问题，并且一旦想出了一个相当完整且可扩展的解决方案，该解决方案适用于IE6、7和8(显然与其他浏览器兼容)。
我在这里写了整篇文章：http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer

认为我会为仍然遇到此问题的人们分享这一点，因为上述解决方案在每种情况下都无法奏效(我认为)。

我们在asp：dropdownlist上有同样的事情：

在Firefox(3.0.5)中，下拉列表是下拉列表中最长项目的宽度，例如600像素宽或类似的宽度。

经过IE，Chrome，FF和Safari所有版本的测试

// JavaScript代码

1
2
3
4
5
6
7
8
9

// HTML代码

1
2
3
4

<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>

最佳答案中的hedgerwow链接(YUI动画变通方法)已损坏，我猜该域已过期。我在代码过期之前复制了代码，因此您可以在这里找到它(代码所有者可以通过再次上传将其告知我是否侵犯了版权)

http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

在同一篇博客文章中，我写了一篇关于使用YUI Button菜单制作与普通元素完全相同的SELECT元素的文章。看看，让我知道是否有帮助！

根据Sai发布的解决方案，这就是使用jQuery的方法。

1
2
3
4
5

$(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:''}); });
});

这似乎适用于IE6，但似乎不会破坏其他功能。另一个好处是，只要您更改下拉菜单，它就会自动更改菜单。

1
2
3
4
5
6
7
8
9
10
11
12
13

$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});

});

您可以将样式直接添加到select元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

$(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事件)。这里的许多其他解决方案都使用事件处理程序更改，该更改效果很好，但如果用户选择与先前选择的选项相同的选项，则不会触发。

像许多其他解决方案一样，焦点和鼠标按下是针对用户将下拉列表置于焦点时，模糊是针对单击时的模糊。

您可能还希望在这种情况下进行某种浏览器检测，以便仅影响即。虽然在其他浏览器中看起来还不错

我以为我会戴上帽子。我制作了一个SaaS应用程序，并且在表中嵌入了一个选择菜单。此方法有效，但它歪曲了表中的所有内容。

1 2	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中。

1
2
3
4
5
6
7
8

<td valign="top" style="width:225px; overflow:hidden;">

<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>

</select>

</td>