인터넷 익스플로러에서 메인메뉴 (이미지일 때)중 한 메뉴를 클릭할 때 점선이 생기는데요

그 점선으로 되는 부분이 실제 메뉴 부분과 좀 달라요.

그 점선을 없애려면 아래의 css에서 어딜 없애야 하는지 모르겠습니다.

.gnb{top:218px;margin-left:70px;height:47px;white-space:nowrap;margin-bottom:10px;}
.gnb ul{list-style:none;margin:0;padding:0;zoom:1}
.gnb ul:after{content:"";display:block;clear:both}
.gnb ul ul{display:none;position:absolute;left:-1px;top:38px;padding:0;background:#fff;border:1px solid #ddd;border-top:0}
.gnb li{list-style:none;float:left;padding-left:2px;position:relative;white-space:nowrap}
.gnb li.first{padding:0;background:none}
.gnb li li{float:none;background:none;padding:0;left:0}
.gnb li a{display:block;float:left;padding:7px 10px 0 10px;height:25px;color:#727272;white-space:nowrap;text-decoration:none}
.gnb li a:hover,
.gnb li a:focus{color:#000}
.gnb li.active a{font-weight:bold;color:#3f3f3f;}
.gnb li li a{float:none;display:block;padding:5px 15px !important;background:none !important;height:auto;font-weight:normal !important}
.gnb li li.active a{font-weight:bold !important}

아니면 어떻게 해야 그 점선과 메뉴 이미지가 정확히 일치되게 할 수 있을까요?

그리고 왜 ie에서만 그런 점선이 생길까요?