これは IE のバグです。解決策を持っている人はいますか? _html/css

これは IE のバグです。解決策を持っている人はいますか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:43:23

オリジナル

949 人が閲覧しました

以下のコード: box-button と box-cover はどちらも絶対位置にあります。ボックスカバーはボックスボタンの上に吊り下げられ、ボックスボタンを完全に覆います。 box-cover は click イベントにバインドされています。ボックスボタン内にテキストが存在する場合、マウスでクリックした領域にテキストが存在しない場合は正常ですが、テキスト上でクリックした場合、クリックイベントは無効になります。もちろん、これは IE でのみ発生します。私の場合は IE 10 です。この問題に遭遇したことはありますか?どうやって解決すればいいでしょうか？

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <style type="text/css">        .box { position:relative; width:500px; margin:30px auto; }        .box * { position:absolute; top:0; right:0; width:100px; height:35px; }        .box .box-button { background-color:red; color:#FFF; line-height:30px; text-align:center; font-size:14px; }        .box .box-cover { z-index:100; cursor:pointer; }    </style>    <script type="text/javascript">        function docLoad() {            document.getElementById("cover").attachEvent("onclick", function () {                alert("OK");            });        }    </script></head><body onload="docLoad()">    <div class="box">        <div class="box-button">选择</div>        <div class="box-cover" id="cover"></div>    </div></body></html>

ログイン後にコピー

ディスカッション (解決策) に返信

関連するイベントを直接バインドするには、ボックスボタンを使用するだけです。。。

ボックスボタンを使用して関連イベントを直接バインドするだけです。。。

いや、実はこれは一例であり、実際の状況はこうではありません。実際の状況は、私の箱のカバーにフラッシュが含まれているということです。クリックイベントはフラッシュによって応答されます。

次に、透明度を使用します:

      .box .box-cover { z-index:100; cursor:pointer;background:yellow;filter:alpha(opacity=0.1);	-moz-opacity:0.1;	-khtml-opacity: 0.1;	opacity: 0.1;}

ログイン後にコピー

次に、透明度を使用します:

      .box .box-cover { z-index:100; cursor:pointer;background:yellow;filter:alpha(opacity=0.1);	-moz-opacity:0.1;	-khtml-opacity: 0.1;	opacity: 0.1;}

ログイン後にコピー

これは本質的に透明です。。これは透明性とは関係ありませんよね？ ?

次に、透明度を使用します。

      .box .box-cover { z-index:100; cursor:pointer;background:yellow;filter:alpha(opacity=0.1);	-moz-opacity:0.1;	-khtml-opacity: 0.1;	opacity: 0.1;}

ログイン後にコピー

これは本質的に透明です。。これは透明性とは関係ありませんよね？ ?

div 自体は透明ではありません

次に、div 上で onclick を使用して実装します。。。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <style type="text/css">        .box { position:relative; width:500px; margin:30px auto; }        .box * { position:absolute; top:0; right:0; width:100px; height:35px; }        .box .box-button { background-color:red; color:#FFF; line-height:30px; text-align:center; font-size:14px; }        .box .box-cover { z-index:100; cursor:pointer; }    </style>    <script type="text/javascript">		function aa(){			alert("OK");		}    </script></head><body onload="docLoad()">    <div class="box">        <div class="box-button">选择</div>        <div class="box-cover" id="cover" onclick="aa()"></div>    </div></body></html>

ログイン後にコピー

<style type="text/css">    #cover {        background-color: green;        filter:alpha(opacity=0);     }</style>

ログイン後にコピー

ボタンを完全に覆うように「cover」に背景色を与え、ボタンのスタイルを表示するために完全に透明にします。
これで問題は解決します。