4

問題

ユーザーが画像の一部をクリックして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をクリックします

  • Demo1(オリジナル)
  • Demo2(完全、w3c検証済み)
  • Demo3(完全、w3c検証済み、text-indent@ Sparky672によって提案されたとおり)。

編集(2012-12-05):デモをjsfiddleに移行しました。

詳細

すべてのブラウザで下の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                                   |
+-------------------------------------------------------+---------------------------------------+
4

2 に答える 2

8

結論

これが、さらに多くの調査を行った後の私の結論です。

このページでは、作成者はIE8でも同じ動作を経験しました。

このSOの質問(1663919 )では、作成者はIE7で同じ動作を経験しました。

これらのSOの質問(1075684、4639921 )では、作成者はIEで同じ問題を抱えていますが、シナリオはわずかに異なりますが類似しています。

仕様にはそれについて何も記載されていないようですが、IEでのみ発生し、アンカー/ボタンが画像の上に配置された場合にのみ発生するため(これは誰もが期待することではありません)、私はこれを言いますIEの単なるバグです。

回避策

問題を回避するには、以下のいずれかを使用してください。

  1. 画像にアンカー/ボタンを配置しないでください。代わりにdiv、CSSを使用してbackground-image(質問に記載されているように)配置します。

  2. アンカー/ボタンに次のCSSプロパティを設定します。これにより、IEで再びクリックできるようになります(ここで説明します)。

    background-image:url(about:blank)
    
于 2012-06-09T14:33:00.333 に答える
1

ここで混乱していることが1つあります

最初の2つのdivでは、入力またはタグの前にimgを使用します

<div class='MyDiv'>
    <img src='https://www.google.com/images/srpr/logo3w.png' />
    <input type='button' class='MyButton' onClick="alert('You clicked g!');"/>
</div>

<div class='MyDiv'>
    <img src='https://www.google.com/images/srpr/logo3w.png' />
    <a href='#' class='MyButton' onClick="alert('You clicked g!');"/></a>
</div>

他のdivでは、入力の前のdivだけです。これには何か理由がありますか?

タグ内にimgを入れてみてください。

<div class='MyDiv'>
    <a href='#' class='MyButton' onClick="alert('You clicked g!');"/><img src='https://www.google.com/images/srpr/logo3w.png' /></a>

</div>

<div class='MyDiv'>

    <a href='#' class='MyButton' onClick="alert('You clicked g!');"/><img src='https://www.google.com/images/srpr/logo3w.png' /></a>
</div>
于 2012-06-01T12:03:37.647 に答える