- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Demo</title>
- <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
- <style type="text/css">
- .wrap{
- width:540px;
- height:260px;
- position:relative;
- }
- .layer_pre{
- position:absolute;
- top:0;
- left:0;
- width:250px;
- height:240px;
- }
- .layer_next{
- position:absolute;
- top:0;
- right:0;
- width:250px;
- height:240px;
- }
- </style>
- </head>
- <body>
- <div class="wrap">
- <img src="http://www.baidu.com/img/bd_logo1.png" />
- <a class="layer_pre" id="J_pre" href="javascript:;"></a>
- <a class="layer_next" id="J_next" href="javascript:;"></a>
- </div>
- </body>
- <script type="text/javascript">
- $(document).ready(function(){
- $('#J_pre').click(function(){
- alert('pre');
- });
- $('#J_next').click(function(){
- alert('next');
- });
- });
- </script>
- </html>
从理论上来说，点击#J_pre和#J_next 应该会触发alert事件，
然而实际结果是，在ie7、8、9、10（ie6及以下没有做尝试），都没有触发到该事件（ie11、firefox、chrome可以正常触发）
（把#J_pre和#J_next换成div标签仍然无法触发，所以可以证明这个和用a标签没有关系）
为了查看这一问题，对#J_pre和#J_next的样式分别加上
- background-color:#000;
那么为了保证肉眼看上去并没有加背景色，但是实际加了背景色以达到能触发事件的效果
对#J_pre和#J_next的样式分别加上
- background-color:#000;
- filter:alpha(opacity=0);
- opacity:0;
这样就能解决ie下的这个bug了（希望大家看了心情好又暖）
转载地址：https://blog.csdn.net/snow_finland/article/details/46647505?locationNum=3