在項目中，測試兼容的時候，在IE9發(fā)現(xiàn)了這樣一個問題。我給一個導(dǎo)航里的tab設(shè)置了 Mouse 事件，當(dāng)鼠標(biāo)移入 tab 浮出子元素二級菜單，移出的時候隱藏掉，可當(dāng)我鼠標(biāo)剛移出 tab 元素，mouseleave 事件就觸發(fā)了。

我找不到原因，我試著新建一個 demo 重現(xiàn)bug，場景如下。

我發(fā)現(xiàn)自己新建的 demo 并沒有出現(xiàn)項目中出現(xiàn)的問題，在確認(rèn)了 js 代碼沒有錯誤之后，開始逐一排除 css 屬性。在逐一排除了 fixed padding margin 等屬性之后，發(fā)現(xiàn)問題居然出現(xiàn)在 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 這個屬性，當(dāng)我去掉這個屬性，我的鼠標(biāo)移出 tab 元素，mouseleave 并未觸發(fā)?？墒俏倚枰@個漸變屬性，在網(wǎng)上搜了相關(guān)兼容的資料，并且嘗試了一下，發(fā)現(xiàn)在還需要在代碼里多添加一個默認(rèn)的背景顏色，得以解決這個問題。

```

background: #1b242b;

```

然后我又發(fā)現(xiàn)了下一個問題，當(dāng)我鼠標(biāo)移出tab，嘗試移出導(dǎo)航盒子進(jìn)入二級菜單，mouseleave 事件又觸發(fā)了，這很不合理，mouseleave 與 mouseout 事件不同，只有在鼠標(biāo)指針離開被選元素時，才會觸發(fā) mouseleave 事件，我鼠標(biāo)移入二級菜單可仍然處于在導(dǎo)航中，怎么會觸發(fā)呢？而且發(fā)現(xiàn)刪除 filter 屬性還是可以解決這個問題，這就有點(diǎn)讓我郁悶，而我的 demo 依然照常運(yùn)行，那項目中究竟是什么影響導(dǎo)致的，排除了半天，最終在導(dǎo)航條盒子里有這樣一行代碼:

```

z-index:999;

```

刪除掉這個屬性，就可以了，好在刪除這個層級屬性對我并沒有影響，讓我納悶的是，為何 z-index 和 filter 屬性會影響到我的 MouseleaveEvent 呢?