<style type="text/css"> body { margin: 0; padding: 0; font-family: 굴림; font-size: 12px; } span { margin: 0; padding: 0; } </style> <div> <span>이 Span 영역의 높이가 Firefox 8에서만 다릅니다.</span> </div>
위와 같은 상황일 때 <span> 영역은 글꼴의 크기가 12px이므로 12px이 나오는 것이 정상인데, Firefox(현재 8버전)에서만 높이가 14px로 측정된다.
높이 height가 달라지는 이 현상은 Firefox의 경우 input 혹은 button 등에서도 일어나는 것으로 보인다.
이 문제는 현재로써는 <span>에 display: inline-block;을 주면 해소가 된다.
http://www.blog.highub.com/css/css-hacks/firefox-css-line-height-problem/ 에서 이 문제에 대한 활발한 논의가 이뤄졌다. 이것은 파이어폭스의 버그가 아니며 파이어폭스가 inline 요소의 높이를 계산하는 방법이 다른 브라우저와 달라서 생기는 현상이다.
inline 요소는 line-height를 지정할 수 없는게 맞고, inline 요소의 높이는 브라우저 재량으로 정해지는 것이다.
따라서 inline 요소의 높이를 명시하고자 한다면 display: block; 혹은 display: inline-block;로 지정해야만 line-height/height 를 명시하는게 가능해진다. 또한 이렇게 하면 line-height를 명시하지 않더라도 FF의 경우 다른 브라우저와 마찬가지로 글자의 높이에 맞춰서 블록의 높이가 정해지게 된다.
만약 높이를 미세하게 조정하고자 한다면 해당 요소는 inline이 아닌 block 요소를 사용해야 하며, 그게 아니라면 block 스타일을 줘야만 한다.