使用CSS进行下拉列表格式化

Question

我基本上在asp.net页面上使用下拉列表控件，我将宽度设置为150px。在mozilla浏览器中，它显示扩展的列表项，而在IE中，列表项文本限制为下拉列表的宽度。任何想法，我怎样才能在IE中获得与Mozilla中相同的下拉列表外观。

我只想将列表项容器扩展到其最大宽度，而不是下拉列表框。

Answer 1

我很确定您无法单独设置下拉列表的宽度和选项 - 这取决于浏览器。唯一的选择是在javascript中自己复制下拉列表的行为。基本上你会创建一个看起来像下拉列表控件的东西，并附加一个click事件处理程序，它会显示一个绝对定位的div（或ul）显示选项。然后，您将为每个选项附加一个事件处理程序，该选项将隐藏选项并执行您需要的操作 - 可能会在下拉控件的文本中显示该选项并存储该值（如果这是一个表单，隐藏的表单字段将有助于此处你想提交）。这是一项相当多的工作，但只要您对css小心谨慎，就可以在所有浏览器中看起来相同。我没有时间在这里编写代码，但是一旦你接受没有快速修复就应该相当简单。

Answer 2

我认为您正在寻找以下解决方案。

https://jsfiddle.net/avernet/2Gn2c/

$("select.ie8-fallback")
    .on('mousedown'   , 'select', expand)
    .on('blur change' , 'select', contract);

虽然如果条件允许，我建议仅使用IE使用IE8。

如果您添加了任何代码，我会提供特定于您问题的解决方案，但我认为您可以从中理解。