ie6,7에서 inline-block 지정시에 영역붙음현상

메뉴나 버튼등의 앵커를 inline-block로 지정하여 배치할때
여타 브라우저는 전부 앵커 영역사이에 간격이 생기나
ie6,7에서는 붙어서 랜더링되는 현상이 있다.
이러한 경우가 발생할 시에는
-----------------------------------------------------------------------

<div class="btn">

<a class="complete" href="#complete" title="완료"></a>

<a class="cancel" href="#cancel" title="취소"></a>

</div>
-----------------------------------------------------------------------

이와같이 안에 내용을 넣어주면 나머지 브라우저와 동일하게 보임
class="hide"는 포지션을 날려주어 안보이게 하는 css속성을 적용시킨상태.
즉 눈에 보이지 않더라도 마크업상의 내용이 들어가면
ie6,7도 제대로 나온다는것.

----------------------------------------------------------------------- 
<div class="btn">

<a class="complete" href="#complete" title="완료"><span class="hide">완료</span></a>

<a class="cancel" href="#cancel" title="취소"><span class="hide">취소</span></a>

</div>
 ----------------------------------------------------------------------- 

css는 둘다 동일.
 .setting .btn a{display:inline-block;width:31px;height:18px}

.setting .btn a.complete{background:url("./images/spr_dictionary.gif") -115px -349px no-repeat}

.setting .btn a.cancel{background:url("./images/spr_dictionary.gif") -149px -349px no-repeat}