Div在Internet Explorer中打包HTML選擇元素

我有一個HTML選擇元素，我用div來包裝。我基本上是做一個自定義的多選下拉框，以便當用戶點擊它而不是顯示通常的選項時，它會顯示一個多選列表框，在其下面的div中彈出。（上面還有一個小小的工具欄div，彈出點擊清除，選擇所有和OK按鈕。）HTML select元素應該是不可點擊的，並且在運行時通過Javascript包含所選項。我的代碼在FireFox和Chrome中運行良好，但在IE9中，select元素仍然是可點擊的，即使它是用div包裝的。它顯然通過div包裝流血。我知道我可以禁用選項選擇，但我希望它看起來啓用。我不希望HTML選項選擇爲可點擊的，所以我在它上面放置了一個div，並將光標類型設置爲指針。我希望用戶能夠點擊HTML選擇元素上的div，然後在其下方顯示我的彈出列表框，以便有效地製作自定義控件。這是我的代碼片段。我正在從JavaScript動態構建這個，並在最後設置el.innerHTML。（順便說一句...我能在這個項目中使用YUI和原型，但不是jQuery的）。Div在Internet Explorer中打包HTML選擇元素

var listText = '<select id="' + this.key + '" format="MultiList" class="' + inputClass + '" value="' + val + '"><option name="">' + val + '</option></select>'; 

var markup = "<div id='listBoxCtrlWrap_"+this.key+"' style='display:inline-block; position:relative; cursor: pointer; width:100%;'>"; 
markup += listText; 
markup +=  "<div id='divWrap_"+this.key+"' title='"+tooltip+"' style='position:absolute; left:0; right:0; top:0; bottom:0;'></div>"; 
markup +=  "<div id='listBoxWrap_"+this.key+"' style='display:none; cursor:default;'>"; 
markup +=  "<div id='listBoxToolbarWrap_"+this.key+"' style='position:absolute; left:0px; top:23px; height:23px; width:99.7%; z-index:90; background-color:#c7ccd2; "; 
markup +=               "border:1px solid #575757; border-bottom-style:none;'/>"; 
markup += "<div style='position:absolute; left:6px; top:2px; z-index:95;'><img  id='listBoxToolbarClear_"+this.key+"' style='cursor:pointer;' src='images/clear_btn.png'/></div>"; 
markup += "<div style='position:absolute; left:62px; top:2px; z-index:95;'><img id='listBoxToolbarSelectAll_"+this.key+"' style='cursor:pointer;' src='images/select_all_btn.png'/></div>"; 
markup += "<div style='position:absolute; right:10px; top:3px; z-index:95;'><img id='listBoxToolbarOKBtn_"+this.key+"' style='cursor:pointer;' src='images/blue_ok_btn.png'/></div>"; 

markup +=  "</div>"; 
markup +=  "<div style='position:absolute; left:0px; top:45px; height: 100%; width:100%; z-index: 100;'>"; 
markup +=   "<select id='listBoxSelector_"+this.key+"' multiple='multiple' style='height:83px'>"; 
markup +=   "<option name='loading'>Loading, please wait...</option>";  
markup +=   "</select>"; 
markup +=  "</div>"; 
markup +=  "</div>"; 
markup += "</div>"; 

el.innerHTML = markup;

有趣的是，如果我徘徊在了HTML的邊界我的鼠標指針選擇我得到的指針手形圖標，並可以點擊它打開我的自定義列表框div。但是如果我點擊HTML選擇的中間，它會打開它的選項列表。（我不希望那個人永遠不會爲用戶打開它，它只會存儲他們的選擇。）這只是在IE中不起作用。我正在使用IE9。任何建議或想法可能是錯誤的？

來源

2013-12-10 Will

這是一個jsfiddle，顯示我認爲可能是我的問題的根源... http://jsfiddle.net/willjones/HpHQ3/它有一個未填充的選擇框。請注意，在Chrome或Firefox中，如果使用鼠標懸停選擇框，則會顯示一個指針鼠標圖標並單擊它不會執行任何操作......但在IE中，將顯示默認的箭頭鼠標圖標，然後單擊選擇框將其打開揭示一條空白線。什麼導致IE在這裏不同？謝謝。 – Will

我發現了一個解決我的問題。這jsfiddle顯示它：http://jsfiddle.net/willjones/RTV8J/2/ 基本上，我添加了顏色的div覆蓋，然後將其透明度設置爲完全透明。

markup += "<div id='divWrap_"+key+"' title='"+tooltip+"' style='position:absolute; left:0; right:0; top:0; bottom:0; background-color:#ffffff; opacity:0;'></div>";

這個工作對IE，並沒有任何不良影響的Firefox或Chrome（這已經工作）。謝謝！

來源

2013-12-17 06:33:45 Will

這可能會也可能不會有所幫助，但每當我遇到僅存在於IE9（或IE8）中的問題，並且無法在FF或Chrome中重現時，我的第一個假設是我正在使用HTML5的某些功能或IE不支持的CSS3。這有一些解決方法（html5shiv和css3派），但它們並不完美。你認爲你可以創建一個你想要做的事情的jsfiddle？

來源

2013-12-10 00:32:41 BK110

Div在Internet Explorer中打包HTML選擇元素

回答

相關問題