스타일 시트에서..

[astraea]

스타일 시트에서.
line-height=19pt 로 잡아주었는데.

firefox 에서 보는거랑
i.e 에서 보는거랑 작은 차이가 있는거 같은데.

왜 그런가요?

수치의 기준이 다른건지.

[박상현]

= 말고 :를 써야 하지 않나요? 그러니까 line-height:19pt처럼요.

[astraea]

아..제가 글 작성을 잘못했네요.
line-height:19pt 로 했는데 그런답니다^^;;

[빛알갱이]

구체적으로 test case를 어디에 올려 놓고, 링크를 걸어 주십시오. 또, 어떤 작은 차이가 나는지 구체적으로 가르쳐 주시면 고맙겠습니다. 글꼴 등에 따라 다를 수도 있고, 변수가 꽤 많습니다.

[astraea]

예시로.

를 보시면 될듯.
i.e 로 볼 경우 글과 배경의 줄이 다 맞는데
firefox 로 볼 경우에는 뒤로 갈수록 조금씩 어긋나네요;;

스타일 시트는

[박상현]

배경 그림 크기가 4x25니까 line-height를 19pt 대신 25px로 맞추니까 안 어긋나고 잘 맞는 것 같군요.
더불어 글꼴 크기도 픽셀로 맞추니 크기가 똑같아지는 것을 보면 아무래도 모질라랑 익스플로러랑 포인트의 기준이 다른 것 같습니다. 그런데 글꼴을 픽셀로 맞춰도 괜찮을지는 모르겠군요.

[kheled]

DOM Inspector로 계산된 line-height: 값을 조사해 보니 25.3333 pixel로 되어 있습니다. 96 DPI를 가정할 경우 19 point를 pixel 값으로 변환하면 아마도 저 값이 나올 겁니다. (1 point는 1/72 인치이니, 19 * 96 / 72 하면 되겠죠.)

모질라의 경우에는 소숫점 부분 0.3333 (실제로는 1/3)을 그대로 보존하여, 세번째 줄마다 1픽셀씩 밀려나게 되는데 반해, IE의 경우에는 소숫점 부분을 그냥 버리는 듯합니다. 스펙을 찾아봐야 겠지만, 개인적인 생각으로는 모질라의 방식이 올바른 것 같습니다.

원하시는 효과를 얻으려면, 박상현님이 쓰신대로 픽셀 단위로 line-height를 지정하시는게 좋을 듯합니다.

[astraea]

자세한 답변 감사합니다~
새로운걸 알았네요..^^

초보인 저에겐 복잡하고도 어려운^^;;

[z980]

<a href=http://jigsaw.w3.org/css-validator/validator-uri.html
target=_blank>http://jigsaw.w3.org/css-validator/validator-uri.html
</a>

w3c.org에서 보니 css에 error와 warning이 뜨는군요..
scroll-bar 속성이야 표준에 없어 에러가 나지만 padding 쪽에서 error가 있네요..
warning이야 font-family에서 sans-serif같은걸 마지막에 추가해주면 없어질거구요..