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

秉承以上的答案，這可能會幫助 -

如果妳在列表中選擇第一項，然後再次打開它，名單將向下打開

現在在底部選擇的選項，並再次打開下拉菜單。該列表將打開覆蓋其它元件