Home >Web Front-end >HTML Tutorial >This is an IE bug. Does anyone have a solution? _html/css_WEB-ITnose
This is an IE bug. Does anyone have a solution? _html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 11:43:231023browse
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>
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;}
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;} 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;} 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>
<style type="text/css"> #cover { background-color: green; filter:alpha(opacity=0); }</style> 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.