0

我在 Chrome (v21.0.1180.89) 中看到了奇怪的行为，但在 FireFox 中运行良好。这是HTML：

<div style="position:relative;text-align:right;width:500px;height:100px;">
    <img src="http://placehold.it/500x100"></img>
    <img src="http://placehold.it/100x100"></img>
    <div>foo</div>
</div>
<div style="height:50px;">bar</div>
<select>
    <option value="1">One xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

仅在 Chrome 中，当您单击它时，选择无法获得焦点（但您可以通过标签选择它）。

如果你将'bar' div 的高度增加到 100px，这样选择就会出现在 100x100 的图像下方，那么你可以点击它。

这是预期的并且 Chrome 的行为正确，还是 FF 只是更宽容？

这是jsfiddle

4

3 回答 3

0

您的div元素扩展为重叠select元素，使用：

pointer-events: none;

在你的 CSS 中div进行反击。

JSFiddle：http: //jsfiddle.net/xjuae/3/

于 2012-09-14T16:42:13.337 回答
0

http://jsfiddle.net/xjuae/2/

z 指数：-1

上部 div 在选择的顶部展开。这是意外的行为，但这是一个修复。

于 2012-09-14T16:42:26.380 回答
0

如果您删除position:relative顶部 div 一切都很好。

jsFiddle 示例

于 2012-09-14T16:44:29.520 回答