Internet Explorer中的dropdownlist样式

Question

IE浏览器渲染我的DropDownList的方式存在一些问题。 在Firefox中，它看起来应该和我想要的方式显示在IE中。 这里是下拉列表中的Firefox截图：

截图在IE：

我想下拉，扩大垂直向上，直至在下拉列表是，我不您不希望下拉菜单低于现有的下拉控件。 有一些窍门如何用CSS来做到这一点？ 在此先感谢，Laziale

Answer 1

这只是下拉式菜单在Internet Explorer 10及更高版本（以及Windows应用商店应用）中的工作方式：当菜单打开时，所选项目将覆盖下拉控制，其他项目出现在其上方和下方。据推测，微软做出了这样的改变，使得the menu is more touch friendly。

我浏览了the list of CSS properties supported by Internet Explorer，但我没有注意到任何影响菜单位置的东西。因此，如果这种行为是不可接受的，您需要避开原生操作系统控制，转而使用基于HTML/CSS的下拉菜单，如jQuery Selectmenu或Telerik的RadDropDownList。

Answer 2

下拉列表基本上由浏览器控制。有限的样式有时会起作用，但它是完全不可信的跨浏览器。这是因为他们通常实际使用操作系统的渲染进行下拉。

如果你想在你的下拉完全控制，你必须自己从头开始使用<ul>的和<li>的绘制，使下拉触发<a>标签和使用JavaScript来切换<ul>和转让选择值的可视性。

JavaScript插件存在，它需要现有的下拉菜单&做一些可比的事情。我不知道哪一个与您的请求完全匹配，但是在组合框模式（http://jqueryui.com/autocomplete）中类似JQueryUI自动完成可能会为您提供一个良好的起始点。

Answer 3

参考 - IE10 Select box issue

这是该控制在Internet Explorer 10根据列表中的项目数量和屏幕的大小，默认行为，其他浏览器将以不同的显示菜单尽管我认为IE10是唯一的浏览器，当打开下拉菜单时，它将平衡选择元素上下的项目数量。

Answer 4

原因是每个浏览器都有不同的选择框。实现一个漂亮的crossbrowser支持的选择框几乎是不可能的。执行“安全”实施的唯一方法是隐藏选择框并将其替换为自定义选择列表实施。

我强烈建议使用已经存在的组件。如果你已经使用jQuery，看看Select2。

Select2是一个基于jQuery的替代选择框。它支持搜索，远程数据集和结果的无限滚动。

我用它，因为我的网页上几个月的时间，我可以说，这是绝对好吃。

Answer 5

这个jsfiddle不是最终的，但如果你在每个浏览器中看起来都一样，你将没有选择拥有自己的自定义选择列表。

在我的jsfiddle中的例子是我实现选择列表最简单的方法。通过使用<input type="radio" />单选按钮，很容易通过css对其进行自定义并获取选定的值。

只要看看它。

Answer 6

秉承以上的答案，这可能会帮助 -

如果妳在列表中选择第一项，然后再次打开它，名单将向下打开

现在在底部选择的选项，并再次打开下拉菜单。该列表将打开覆盖其它元件