This is an IE bug. Does anyone have a solution? _html/css

This is an IE bug. Does anyone have a solution? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:43:23

Original

958 people have browsed it

The code below: box-button and box-cover are both absolutely positioned. The box-cover is suspended above the box-button, completely covering the box-button. box-cover is bound to the click event. There is text in the box-button. If there is no text in the area clicked by the mouse, everything is normal. However, if the click is on the text, the click event will be invalid. Of course, it’s only in IE. Mine is IE 10. Have you ever encountered this problem? How to solve it?

<!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>

Copy after login

Reply to the discussion (solution)

Isn’t it enough to directly use box-button to bind related events? . . .

Just use box-button to bind related events directly. . .

No, actually this is just an example, the real situation is not like this. The real situation is that my box-cover actually contains flash. The click event is responded to by flash.

Then use transparency:

      .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;}

Copy after login

Then use transparency:

      .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;}

Copy after login

It is inherently transparent. . This has nothing to do with transparency, right? ?

Then use transparency:

      .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;}

Copy after login

is inherently transparent. . This has nothing to do with transparency, right? ?

The div itself is not transparent

Then just use onclick on the div to achieve it. . .

<!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>

Copy after login

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

Copy after login

Give "cover" a background color to completely cover the button; then make it completely transparent to reveal the button style.
This will solve your problem.