ie8中一个很奇怪的现象。

在做一个网页导航时：

1、要求鼠标悬浮有一个背景效果显示鼠标指向。

2、点击某个导航进入该页后导航相对应的导航栏高亮。

3、导航栏文字要求是图片（整个做成的是一张透明png格式图片）

按照以上要求，做了各浏览器兼容性调试，Google，firefox，ie9及以上，360急速等第三方浏览器都通过测试，但是到了ie8时就出现问题

如图

以下是html代码

<div class="w1002 mr0 cur" style="position:relative;">

<!--此行代码是用来高亮显示背景效果使用，放在导航底层-->
            <div class="nc_bg_c w1002 mr0"> 
            <a class="i1" data-title="i1"></a>
            <a class="i2" data-title="i2"></a>
            <a class="i3" data-title="i3"></a>
            <a class="i4" data-title="i4"></a>
            <a class="i5" data-title="i5"></a>
            <a class="i6" data-title="i6"></a>
            <a class="i7" data-title="i7"></a>
            <a class="i8" data-title="i8"></a>
            <a class="i9" data-title="i9"></a>
            <a class="i10" data-title="i10"></a>
            </div>

<!--此代码是鼠标真是点击的链接层。放在导航顶层-->
            <div class="n_c w1002 mr0 father"> 
            <a class="i1" data-title="i1" href="/"></a>
            <a class="i2" data-title="i2" href="/myhome/"></a>
            <a class="i3" data-title="i3" href="/member/mode-purpose-hyla.html"></a>
            <a class="i4" data-title="i4" href="/member/mode-purpose-rqhy.html"></a>
            <a class="i5" data-title="i5" href="/chat/"></a>
            <a class="i6" data-title="i6" href="/member/search/mode-large"></a>
            <a class="i7" data-title="i7" href="/blog"></a>
            <a class="i8" data-title="i8" href="/services/dating/dating-hd.html"></a>
            <a class="i9" data-title="i9" href="/services/matchmaking/"></a>
            <a class="i10" data-title="i10" href="/services/mall"></a>
            </div> 
        </div> 

以下是部分出问题的css代码(原代码)：

.nav .n_bg{height:40px;background:url(/images/nav_bg.png) center repeat-x;}
.nav .n_c{height:40px;position:absolute;z-index:10;background:url(/images/nav_font.png) center no-repeat;}
.nav .nc_bg_c{height:40px;position:absolute;z-index:3;}
.nav .n_b{height:0px;border-top:1px solid #fc61bf; position:absolute;z-index:1;margin-top:38px;}
.nav .nav_hot{position:absolute;z-index:4;margin-top:-13px;margin-left:97%;}
.nav .n_c .n_cur{height:40px;opacity:0.5;filter:alpha(opacity=50);background:#666;position:absolute;z-index:4;}

/*问题出在此行代码*/
.nav .n_c a, .nc_bg_c a{display:inline-block;height:40px;float:left;text-align:center;opacity:0;filter:alpha(opacity=0);border-right:1px solid #888;border-left:1px solid #888;}

以下是在ie8调试的过程：

调试第一步把display修改为display:block; 测试还是无效，鼠标放对应导航上根本就点不到链接，观察鼠标只要放到导航的最边上就能点到链接

然后就想试试这个a标签是指定了高度和宽度的应该正常的显示成一个框框噻，怎么就跑到边边上去了，很奇葩的问题。

.nav .n_c a, .nc_bg_c a{display:block;height:40px;float:left;text-align:center;opacity:0;filter:alpha(opacity=0);border-right:1px solid #888;border-left:1px solid #888;}

然后就想给个背景测试这个框框是否显示完整了的，奇迹发生了随便任意给个背景色，框框显示又是正常的嘛，然后在ie8中测试一下就能点击到导航的链接了，一旦删除背景色就不行。

因为做了滤镜透明的就不怕给背景色导致显示问题的。

.nav .n_c a, .nc_bg_c a{display:block; background:#666; height:40px;float:left;text-align:center;opacity:0;filter:alpha(opacity=0);border-right:1px solid #888;border-left:1px solid #888;}

一直不明白ie8会出现这样奇葩的情况，以上记录下来以防自己再次遇到或者有朋友遇到相同情况找不到原因的情况发生了。

如果有哪位大侠能明白ie8为啥会出现这样的情况，请给我留个言说说原理哦。