在项目中，测试兼容的时候，在IE9发现了这样一个问题。我给一个导航里的tab设置了 Mouse 事件，当鼠标移入 tab 浮出子元素二级菜单，移出的时候隐藏掉，可当我鼠标刚移出 tab 元素，mouseleave 事件就触发了。
我找不到原因，我试着新建一个 demo 重现bug，场景如下。
我发现自己新建的 demo 并没有出现项目中出现的问题，在确认了 js 代码没有错误之后，开始逐一排除 css 属性。在逐一排除了 fixed padding margin 等属性之后，发现问题居然出现在 background filter 这里，是因为这个渐变色背景，我的代码如下：
```
background: -moz-linear-gradient(top, #1b242b 0%, #255b7d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b242b), color-stop(100%,#255b7d));
background: -webkit-linear-gradient(top, #1b242b 0%,#255b7d 100%);
background: -o-linear-gradient(top, #1b242b 0%,#255b7d 100%);
background: -ms-linear-gradient(top, #1b242b 0%,#255b7d 100%);
background: linear-gradient(to bottom, #1b242b 0%,#255b7d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b242b', endColorstr='#255b7d',GradientType=0 );
```
在 IE9 下使用的是 filter 这个属性，当我去掉这个属性，我的鼠标移出 tab 元素，mouseleave 并未触发。可是我需要这个渐变属性，在网上搜了相关兼容的资料，并且尝试了一下，发现在还需要在代码里多添加一个默认的背景颜色，得以解决这个问题。
```
background: #1b242b;
```
然后我又发现了下一个问题，当我鼠标移出tab，尝试移出导航盒子进入二级菜单，mouseleave 事件又触发了，这很不合理，mouseleave 与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件，我鼠标移入二级菜单可仍然处于在导航中，怎么会触发呢？而且发现删除 filter 属性还是可以解决这个问题，这就有点让我郁闷，而我的 demo 依然照常运行，那项目中究竟是什么影响导致的，排除了半天，最终在导航条盒子里有这样一行代码:
```
z-index:999;
```
删除掉这个属性，就可以了，好在删除这个层级属性对我并没有影响，让我纳闷的是，为何 z-index 和 filter 属性会影响到我的 MouseleaveEvent 呢?
