問題
ユーザーが画像の一部をクリックしてJavascriptイベントをトリガーできるWebページを作成しています。しかし、絶対位置のアンカー(a
)/ボタン(input type=button
)を画像( )に配置すると、画像の上にある場合でも、 IE(のみ)ではimg
クリックできないことがわかりました。
デモ
<style type="text/css">
.MyDiv
{
position:relative;
left:0px;
top:0px;
width:275px;
height:95px;
}
.MyDiv .MyImageDiv
{
position:absolute;
left:0px;
top:0px;
width:275px;
height:95px;
background-image:url('https://www.google.com/images/srpr/logo3w.png');
}
.MyDiv .MyButton
{
position:absolute;
left:162px;
top:20px;
width:53px;
height:80px;
display:inline-block; /* Added based on @Zeta's comment */
background-color:transparent;
/* background-color:black;opacity:0.5;*/
border:0px;
cursor:pointer;
}
</style>
<!-- Button on image: cannot click in IE. Why? -->
<div class='MyDiv'>
<img src='https://www.google.com/images/srpr/logo3w.png' />
<input type='button' class='MyButton' onClick="alert('You clicked g!');"/>
</div>
<!-- Anchor on image: cannot click in IE. Why? -->
<div class='MyDiv'>
<img src='https://www.google.com/images/srpr/logo3w.png' />
<a href='#' class='MyButton' onClick="alert('You clicked g!');"></a>
</div>
<hr/>
<!-- Button on div with background-image: no problem -->
<div class='MyDiv'>
<div class='MyImageDiv'></div>
<input type='button' class='MyButton' onClick="alert('You clicked g!');"/>
</div>
<!-- Anchor on div with background-image: no problem -->
<div class='MyDiv'>
<div class='MyImageDiv'></div>
<a href='#' class='MyButton' onClick="alert('You clicked g!');"></a>
</div>
ライブデモ
テストするには、中の小文字のgをクリックします
編集(2012-12-05):デモをjsfiddleに移行しました。
- Demo4 @ jsfiddle
- Demo5 @ jsfiddle( @ Sparky672
text-indent
によって提案されたとおり)。
詳細
すべてのブラウザで下の2つのアラートをクリックしてトリガーできます。ただし、最初の2つはIEでトリガーできません(以下のテスト結果を参照)。私はいつでもそのように書かないように自分自身に思い出させることができるので大丈夫ですが、なぜこれが起こっているのかについての賢明な説明はありますか?
PSz-index
アンカー/ボタンで使用してみましたが、役に立ちませんでした。
編集(2012-06-01):アンカー/ボタンでdisplay:block
/を使用してみました( display:inline-block
@Zetaのコメントによる)が、役に立ちませんでした。
また、IE9の開発ツール(F12)を使用して、ページのデバッグを試みました。矢印ツール(Ctrl + B)を使用してアンカー/ボタンを選択すると、選択できません。ただし、開発ツールのHTMLでアンカー/ボタン要素を強調表示すると、アンカー/ボタンの位置とサイズが正しく表示されます。不思議です。
試験結果
+-------------------------------------------------------+---------------------------------------+
| | Can click on anchor / button on image |
+-------------------------------------------------------+---------------------------------------+
| IE 6.0.2900.2180.xpsp_sp2_gdr.100216-1441, on Windows | **NO** |
| IE 9.0.8112.16421, on Windows | **NO** |
| Opera 11.64, on Windows | Yes |
| Opera 12.00, on Windows | Yes |
| Opera 12.02, on Windows | Yes |
| Opera 12.11, on Windows | Yes |
| Opera 11.64, on Mac | Yes |
| Opera 12.00, on Mac | Yes |
| Opera Mini 7.0.4, on iPhone | Yes |
| Firefox 12.0, on Windows | Yes |
| Firefox 14.0.1, on Windows | Yes |
| Firefox 15.0.1, on Windows | Yes |
| Firefox 13.0, on Mac | Yes |
| Chrome 19.0.1084.52m, on Windows | Yes |
| Chrome 22.0.1229.79 m, on Windows | Yes |
| Chrome 23.0.1271.95 m, on Windows | Yes |
| Chrome 19.0.1084.54, on Mac | Yes |
| Chrome 21.0.1180.82, on iPhone | Yes |
| Safari 5.1.5, on Windows | Yes |
| Safari 5.1.7 (7534.57.2), on Windows | Yes |
| Safari 5.1.7 (7534.57.2), on Mac | Yes |
| Safari, on iOS 4.3.5 | Yes |
| Browser, on Android 3.1 | Yes |
+-------------------------------------------------------+---------------------------------------+