測試的一點點後,在我看來,如果樣式以任何方式修改IE不能打開下拉。
是的,好bug在那裏。任何改變選擇框(包括任何樣式更改,甚至是通過更改父類名稱觸發的更改)都會使IE爲其重新創建操作系統窗口小部件,這具有關閉它的副作用。所以下拉菜單打開,但在渲染前立即關閉。如果你在背景更改功能上設置了超時時間,你可以在後面看到它。
在聚焦之前,您需要的是第一個事件,因此您可以在打開之前更改樣式,使下拉關閉。幸運的是,there is one!但它只是IE瀏覽器。對於其他瀏覽器(包括IE8),最好堅持簡單的CSS :focus
選擇:
<style>
select { background-color: #BDE5F8; }
select:focus, select.focus { background-color: white; }
</style>
<select>
<option>choose...</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<!--[if lt IE 8]><script>
// Fix lack of :focus selector for select elements in IE7-
//
var selects= document.getElementsByTagName('select');
for (var i= selects.length; i-- >0;) {
var select= selects[i];
select.onfocusin= function() {
this.className= 'focus';
};
select.onfocusout= function() {
this.className= '';
};
}
// Or, the same expressed in jQuery, since you mentioned using it
//
$('select').bind('focusin', function() {
$(this).addClass('focus');
}).bind('focusout', function() {
$(this).removeClass('focus');
});
</script><![endif]-->
。我甚至嘗試更改父元素的className,以更改背景顏色,但獲得相同的結果。 也許