html - 在 Firefox、Safari 和 Chrome 中，Html 选择在简单情况下无法下拉。浏览器正常

Question

以下 html 中的“选择”在 IE9.0 中有效，但在 Firefox 10.0、Safari 5.1.7 和 Chrome 26.0 中单击时无法下拉。为什么？

我在一个更复杂的网页中遇到了这个问题，并且花了一些时间将其隔离到这个简单的案例中。所有剩余的元素和样式似乎都需要存在才能发生问题。

<h1>A</h1>
<div style="margin-top: 3px; float: right;">
   <select>
      <option value="1">B</option>
      <option value="2">C</option>
   </select> 
</div>
<div style="position: relative;">
   D
</div>

Answer 1

这是一个答案。您相对定位的 D 元素位于选择框的顶部。如果单击它的底部，则可以选择它。尝试将选择设置为具有高于相对定位的 div 的 z-index，或更改 div 的宽度。

一个解法：

<h1>A</h1>
<div style="margin-top: 3px; float: right;">
   <select>
      <option value="1">B</option>
      <option value="2">C</option>
   </select> 
</div>
<div style="position: relative; width:50px;">
   D
</div>