Div, упаковывающий элемент выбора HTML в Internet Explorer

Question

У меня есть элемент выбора HTML, который я обертываю с div. Я в основном делаю пользовательский выпадающий список с множественным выбором, чтобы, когда пользователь щелкает по нему, вместо того, чтобы показывать обычные опции, он показывает список со множественным выбором, всплывающий в div под ним. (Существует также небольшая панель инструментов div чуть выше этого, которая появляется при нажатии с кнопками clear, select all и ok.) Элемент select HTML должен быть не щелкаемым и содержать выбранные элементы с помощью Javascript во время выполнения. Мой код работает нормально в FireFox и Chrome, но в IE9 элемент выбора выбора по какой-то причине по-прежнему активен, даже если он заключен в div. По-видимому, он истекает через оболочку div. Я знаю, что могу отключить опцию выбора, но хочу, чтобы она выглядела включенной. Я не хочу, чтобы опция HTML выбиралась кликабельной, поэтому я наложил на нее div и установил тип курсора на указатель. Я хочу, чтобы пользователь мог щелкнуть на элементе div, расположенном над элементом HTML select, а затем показать мой всплывающий список под ним, эффективно создавая пользовательский элемент управления. Вот фрагмент из моего кода. Я строю это из JavaScript динамически и в конце устанавливаю el.innerHTML. (Кстати... я могу использовать YUI и прототип, но не JQuery в этом проекте.)

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. Любые предложения или идеи, что может быть не так?

Answer 1

Я нашел решение моей проблемы. Этот 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 (которые уже работали). Спасибо!

Answer 2

Это может или не может быть полезным, но всякий раз, когда я сталкиваюсь с проблемой, которая существует только в IE9 (или IE8) и не воспроизводится в FF или Chrome, мое первое предположение заключается в том, что я использую некоторые функции HTML5 или CSS3, которые IE делает не поддерживается. Для этого есть обходные пути (html5shiv и css3 pie), но они не идеальны. Как вы думаете, вы могли бы создать jsfiddle из того, что вы пытаетесь сделать?