IE下拉列表宽度

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

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

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

请先 登录 后评论

10 个回答

Katy

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

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

这个选择项的宽度是200像素。

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

请先 登录 后评论
pilsetnieks

到目前为止还没有。不了解IE8,但在IE6和IE7中无法实现,除非你用javascript实现自己的下拉列表功能。在网络上有一些例子可以做到这一点,但我并没有看到复制现有功能有什么好处。

请先 登录 后评论
Robert C. Barth

在IE6/IE7/IE8中没有办法做到这一点。该控件是由应用程序绘制的,而IE并不是这样绘制的。最好的办法是通过简单的HTML/CSS/JavaScript实现自己的下拉菜单,如果下拉菜单的宽度和列表的宽度非常重要的话。

请先 登录 后评论
Sleep Deprivation Ninja

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

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

您将需要包括以下内容并包装您的 <select> 元素 <span class="select-box">

把这些放在你的页面的body标签之前:

3.

验收后编辑:

您也可以在不使用YUI库和Hack控件的情况下做到这一点。你真正需要做的就是输入onmouseover="this.style。宽度= '汽车' " onmouseout = " this.style。Width ='100px'"(或者任何你想要的)。YUI控件给了它漂亮的动画,但这不是必需的。这个任务也可以用jquery和其他库来完成(不过,我没有找到这方面的明确文档)。

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

请先 登录 后评论
Community

我们在asp:下拉列表中也有同样的东西:

在Firefox(3.0.5)中,下拉菜单是下拉菜单中最长条目的宽度,大概是600像素宽之类的。

请先 登录 后评论
Community

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

});
请先 登录 后评论
Tinus

@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中工作得很好)

请先 登录 后评论
Justin Fisher

我使用了下面的解决方案,它似乎在大多数情况下都很有效。

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

请先 登录 后评论
bluwater2001

这是最简单的解决办法!!在我开始之前,我必须告诉你下拉选择框会在几乎所有的浏览器中自动展开,除了ie6 .所以…我会做一个浏览器检查[即IE6],并只在该浏览器中写入以下内容。在这里,首先检查浏览器..

代码将神奇地展开下拉选择框。唯一的问题与解决方案是onmouseover下拉菜单将扩大到420px..由于overflow = hidden,我们隐藏了扩展后的下拉菜单大小,并将其显示为170px;因此,DDL右侧的箭头将被隐藏,无法看到。但是选择框将被扩展到420px;这才是我们真正想要的。您可以自己尝试下面的代码,如果喜欢的话可以使用它。欢呼。

.ctrDropDown{宽度:420 px;} .ctrDropDownClick{宽度:420px;}

以上就是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.--%>
}
请先 登录 后评论