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;

divそれを打ち消すためにあなたのCSSで。

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

于 2012-09-14T16:42:13.337 に答える
0

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

z-index：-1

上のdivはselectの上に拡張されています。これは意図しない動作ですが、ここで修正します。

于 2012-09-14T16:42:26.380 に答える
0

position:relative一番上のdivを削除すると、すべてうまくいきます。

jsFiddleの例

于 2012-09-14T16:44:29.520 に答える