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

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

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

===============>>#1 票数: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的例子 希望这可以帮助。

===============>>#2 票数:14

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

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

===============>>#3 票数: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=''"

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

===============>>#4 票数: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。

===============>>#5 票数: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中完美运行)

===============>>#6 票数:5

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

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

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

===============>>#7 票数:5

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

===============>>#8 票数: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");
    }
    });

});

===============>>#9 票数: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.--%>
}

===============>>#10 票数:2

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

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

===============>>#11 票数:2

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

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

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

===============>>#14 票数: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会消失,但是一旦你选择了就会返回。

希望这有助于某人。

===============>>#15 票数:2

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

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

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

===============>>#17 票数:1

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

===============>>#18 票数:0

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

===============>>#19 票数:0

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

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

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

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

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

===============>>#21 票数:0

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

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

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

===============>>#22 票数:0

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

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

});

===============>>#23 票数:0

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

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

===============>>#24 票数:0

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

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

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

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

===============>>#25 票数:0

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

===============>>#26 票数: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:''}); });
});

===============>>#27 票数: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扔在一个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>

  ask by Nimesh Madhavan translate from so

未解决问题?本站智能推荐:

1回复

Html下拉列表中的条目列表和所选条目的大小不同

我面临着html下拉的一些问题。 我想保持下拉列表的大小不变,但是当用户点击下拉列表时,列表应该以更大的尺寸显示,这样条目就不会被截断。这是fiefox中的默认行为,此问题仅出现在IE浏览器。 任何人都可以建议在IE中解决这个问题吗? 我已经尝试在onclick事件中扩展下拉列表的大小
2回复

为什么此下拉菜单在IE中不起作用?

我有一个下拉菜单,我为此找到了一个教程 。 在Firefox和Opera中,下拉菜单可以正常工作。 但是在Internet Explorer中它不起作用。 子菜单未对齐。 它们不是放在父项下,而是在右边。 为什么在IE中不起作用? JavaScript代码中是否有错误,应使其
1回复

下拉菜单在Internet Explorer中不起作用

我拍了一些代码,并制作了一个可滑动显示的水平下拉导航栏,但问题是,尽管它可以在chrome和firefox中使用,但在Internet Explorer中不起作用。 这是代码。 我非常感谢大家的帮助。 $(function () { $(".item").on("click"
3回复

IE中CSS下拉列表消失

我知道我已经经历过很多关于这个的问题,答案不能解决我的问题。 我做了一个CSS下拉菜单,它可以在chrome和firefox中使用。 但是当我在IE中检查它时,下拉菜单消失了。 当您将鼠标悬停在顶部菜单上时,将显示下拉菜单,然后,当您尝试将光标向下移动到下拉菜单时,它就会消失。
1回复

CSS下拉列表在较旧的IE浏览器中不起作用

我有一个CSS下拉菜单,可在大多数浏览器中使用,但不适用于XP上的IE的某些旧版本。 除了我的许多学生仍在使用该浏览器,因此使用该网站的能力受到限制外,我一点也不在乎。 在这些较旧的IE浏览器上,仅显示HOME链接。 这是HTML,后跟CSS。 谁能找出导致问题的原因? 以下是一些
1回复

如何在IE中的HTML选择下拉列表中设置font-family? [重复]

可能重复: 更改选择标记中单独选项的css font-family Internet Explorer中以粗体显示的样式选项 我无法在IE8,9中设置HTML select下拉列表的font-family。 这是一个错误/财产还是我做错了什么? 字体大小设置有效。 这个
1回复

javascript相关下拉列表在IE 8中不起作用

我在这里搜索过,找到了一个JavaScript下拉列表,该下拉列表基于另一个下拉列表以及我在Chrome中运行的代码而发生了变化。 但是,它在IE 8.0.6中不起作用,我想知道是否有人可以突出显示不起作用的部分,或者提出其他解决方法(JQuery,CSS等)。 当我将其加载到IE中时,
1回复

在Firefox和IE中,下拉列表背景颜色变为白色onclick-不是Chrome

由于某种原因,我无法终生思考,因此我网站首页上的下拉列表在单击时将其背景颜色更改为白色(应该保持棕色)。 我在“论坛”页面上具有完全相同的下拉列表,并且工作正常。 我在这里使用此代码: 如果我使用!important,它将在Chrome中完美运行,但是IE和Firefox将其
2回复

如何在IE7中设置下拉菜单项的背景色宽度?

我有以下导航栏: http : //jsfiddle.net/jajq3/embedded/result/ 为了后代,这是结构: 如您所见,将鼠标悬停在下拉菜单链接上时,链接后面的背景颜色会更改。 但是在IE7中,背景并没有一直延伸到下拉菜单的边缘; 它只会到达链接文本的边缘。
2回复

IE 8/9中的下拉列表宽度

下图描述了我当前的问题。 在没有JavaScript / JQuery的情况下,是否有(css)方法可在IE8 / 9中实现“良好浏览器”行为(如FF)? 找到了2008/2011年的一些旧帖子,但没有任何可能的解决方案。 (例如线程1 线程2 ) 非常感谢!