在 Internet Explorer 中包装 HTML 选择元素的 Div答案

【问题标题】：Div wrapping an HTML select element in Internet Explorer在 Internet Explorer 中包装 HTML 选择元素的 Div
【发布时间】：2019-04-24 15:04:52
【问题描述】：

我有一个用 div 包装的 HTML 选择元素。我基本上是在制作一个自定义的多选下拉框，这样当用户单击它而不是显示通常的选项时，它会在其下方的 div 中显示一个多选列表框。（在此上方还有一个小工具栏 div，单击时会弹出清除、全选和确定按钮。） HTML 选择元素应该是不可点击的，并且在运行时通过 Javascript 包含所选项目。我的代码在 FireFox 和 Chrome 中运行良好，但在 IE9 中，选项选择元素由于某种原因仍然是可点击的，即使它是用 div 包装的。它显然会通过 div 包装器流血。我知道我可以禁用选项选择，但我希望它看起来已启用。我不希望 HTML 选项 select 永远是可点击的，所以我在它上面放置了一个 div 并将光标类型设置为指针。我希望用户能够单击覆盖 HTML 选择元素的 div，然后在其下方显示我的弹出列表框，从而有效地制作自定义控件。这是我的代码中的一个 sn-p。我正在动态地从 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。有什么建议或想法可能有什么问题吗？

这是一个 jsfiddle，它显示了我认为可能是我的问题的根源...jsfiddle.net/willjones/HpHQ3 它有一个未填充的选择框。请注意，在 Chrome 或 Firefox 中，如果用鼠标悬停在选择框上，则会显示指针鼠标图标，然后单击它不会执行任何操作...但在 IE 中，会显示默认的箭头鼠标图标，然后单击选择框会打开它露出一个空白行。是什么导致 IE 在这里有所不同？

【问题讨论】：

标签： html html-select

【解决方案1】：

这可能有帮助，也可能没有帮助，但每当我遇到仅存在于 IE9（或 IE8）中且无法在 FF 或 Chrome 中重现的问题时，我的第一个假设是我正在使用 HTML5 或 CSS3 的某些功能那个IE不支持。有解决方法（html5shiv 和 css3 pie），但它们并不完美。你认为你可以创建一个jsfiddle 你正在尝试做的事情吗？

【讨论】：

【解决方案2】：

我找到了解决问题的方法。这个 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（已经在使用）没有任何不良影响。谢谢！

【讨论】：