it-swarm.cn

下拉列表宽度 IE

在IE中,下拉列表与dropbox的宽度相同(我希望我有意义),而在Firefox中,下拉列表的宽度根据内容而有所不同。

这基本上意味着我必须确保Dropbox足够宽以显示尽可能长的选择。这使我的页面看起来很难看:(

这个问题有解决方法吗?如何使用CSS为dropbox和下拉列表设置不同的宽度?

92
Nimesh Madhavan

这是另一个 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示例 。希望这可以帮助。

102
BalusC

创建自己的下拉列表更令人痛苦。您可以使用一些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控件为它提供Nice动画但不是必需的。这个任务也可以用jquery和其他库来完成(虽然我还没有找到明确的文档)

- 修改编辑:
IE对于选择控件的onmouseout存在问题(它不考虑将鼠标悬停在选项上的鼠标悬停选项上)。这使得使用mouseout非常棘手。第一个解决方案是迄今为止我发现的最好的解决方案。

14
Sleep Deprivation Ninja

你可以试试以下......

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

我试过,它对我有用。不需要其他任何东西。

12
Sai

我使用了以下解决方案,它在大多数情况下似乎运行良好。

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

9
Justin Fisher

@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中完美运行)

7
Tinus

如果你使用jQuery然后尝试这个IE选择宽度插件:

http://www.jainaewen.com/files/javascript/jquery/ie-select-style/

应用此插件使得Internet Explorer中的选择框看起来像在Firefox,Opera等中一样工作,允许选项元素以全宽打开而不会丢失固定宽度的外观和样式。它还在Internet Explorer 6和7中的选择框中添加了对填充和边框的支持。

5
Ewen

在IE6/IE7/IE8中无法做到这一点。该控件由应用程序绘制,IE根本不会这样绘制。最好的办法是通过简单的HTML/CSS/JavaScript实现自己的下拉菜单,如果下拉一个宽度和列表另一个宽度那么重要。

5
Robert C. Barth

在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");
    }
    });

});
4
Thad

这是最简单的解决方案。

在开始之前,我必须告诉你,下拉选择框将自动扩展到除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.--%>
}
3
bluwater2001

检查一下..它不完美但它的工作原理只适用于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%'"
2
lucien

如果你想要一个没有过渡效果的简单下拉和/或弹出菜单,只需使用CSS ...你可以强制IE6支持:使用.htc文件(css3hover?)悬停在所有元素上,并在行为中定义(仅限IE6属性)有条件地附加的CSS文件。

2
cam

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');
                                }})
2
jbabey

这是我从其他人的东西中取出的东西。

        $(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会消失,但是一旦你选择了就会返回。

希望这有助于某人。

2
Derrick

这是执行此操作的最佳方式:

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

它与BalusC解决方案完全相同。只有这个更容易。 ;)

2
mcmwhfy

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

免责声明:我编写了那个东西,欢迎补丁

2
PowerKiKi
1
Ybbest

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');
    })
    }
}
1
Federico Valido

我尝试了所有这些解决方案,没有一个完全适合我。这就是我提出的

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

与许多其他解决方案一样,焦点和mousedown用于当用户将下拉列表置于焦点时,模糊是指用户点击它们时。

您可能还想在此处粘贴某种浏览器检测,因此它只会影响即。但它在其他浏览器中并不坏看

0
RasTheDestroyer

这似乎适用于IE6,并没有打破其他人。另一个好处是它会在您更改下拉选项后自动更改菜单。

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

});
0
lhoess

基于 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:''}); });
});
0
Ahmad Alfy

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

在Firefox(3.0.5)中,下拉列表是下拉列表中最长项目的宽度,就像600像素宽或类似的东西。

0
Harlequin

您可以直接向select元素添加样式:

<select name="foo" style="width: 200px">

所以这个选择项目将是200像素宽。

或者,您可以将类或id应用于元素并在样式表中引用它

0
Katy

Hedgerwow链接(YUI动画解决方案)在第一个最佳答案中被打破,我猜域名已过期。我在代码到期之前复制了代码,所以你可以在这里找到它(代码的所有者可以通过再次上传来破坏任何版权,让我知道)

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

在同一篇博文中,我写了一篇关于使用YUI Button菜单制作完全相同的SELECT元素的方法。看看,如果这有帮助请告诉我!

0
Hammad Tariq

到目前为止还没有一个。不知道IE8但它不能在IE6和IE7中完成,除非你用javascript实现你自己的下拉列表功能。有一些例子如何在网上做,虽然我没有看到重复现有功能的好处。

0
pilsetnieks

它在所有版本的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>
0
Arif

我不得不解决这个问题,并且曾经提出过一个非常完整且可扩展的解决方案,适用于IE6,7和8(显然与其他浏览器兼容)。我在这里写了一篇关于它的文章: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-Explorer

我以为我会分享这个仍然遇到这个问题的人,因为上述解决方案都不适用于所有情况(在我看来)。

0
Aerendel

我以为我会戴上帽子。我创建了一个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扔在一个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>
0
n0nag0n