ie9, 10에서 margin-bottom 값이 다르게 되는 문제

명확한 원인을 밝힌 후 쓰는건 아니고 업무 중 발생했던 일에 대해서 기록합니다.

상황. 전체를 싸잡아 링크를 걸어야해서 div대신 span을 쓰고 display:block을 잡은 상태에서 margin: 0 0 7px를 주었습니다.

.btn span {display:block;margin:0 0 7px}

별 탈 없이 코딩하였고 작업할 때 보는 크롬에서 문제 없었기 때문에 IE에서 테스트 하는 데 문제가 발생했습니다.

IE 7, 8에서 무리 없이 보여지는데 예상외로 IE 9, 10에서 더 아래로 넓게 퍼지더군요. 여태까지 IE 7, 8에서 문제가 생긴적은 있지만 크롬과 IE 7, 8에서 문제 없고 IE 9, 10에서만 문제가 발생한 것은 이번이 처음이었습니다.

IE 9, 10에 맞추자니 크롬, IE 7,8에서 짧아지고... IE10도 글렀구나 하며 이것 저것 해보다가 약 30분간의 삽질 끝에 IE 9, 10에서 기본 줄간격에 차이가 있는 걸로 추정할 수 있는 답을 얻었습니다.

해결 CSS
.btns span {display:block;margin-bottom:7px;line-height:14px}

(당연히 line-height 값은 알맞게 맞춰줘야합니다)