줄 높이가있는 세로 가운데 맞춤

<div style="line-height:100px; height:100px;"> 
    <span style="vertical-align:middle;">test</span> 
</div>

범위에 vertical-align:middle이 지정된 경우에만 위의 html은 아래와 다른 결과를 생성합니다.줄 높이가있는 세로 가운데 맞춤

<div style="height:100px;"> 
    <span style="line-height:100px; vertical-align:middle;">test</span> 
</div>

크롬 및 파이어 폭스에 1px, ie8에 2px 놓았습니다.

왜 다른가요?

2012-07-19 alice

다른 브라우저가 선 높이를 다르게 해석한다고 생각됩니다. 당연히 여기서 잘못 될 수있다. – asprin

나는 Asprin에 동의한다. –

문제는 div 태그의 기본값 인 border-width을 0px으로 설정하고 변경 사항을 확인하는 것입니다.

2012-07-19 12:15:43 Prateek

SPAN과 DIV 요소의 주된 차이점은 SPAN이 자신의 형식을 지정하지 않는다는 것입니다. DIV 요소에는 단락 나누기가 포함됩니다. SPAN 요소는 브라우저에 스타일 규칙을 SPAN에있는 모든 것에 적용하도록 지시합니다.

그리고 저는 약간의 형식을 지정하는 div가 그 차이 일 수 있다고 생각합니다.

2012-07-19 13:03:23

제 질문은 왜 'line-height'가'span'에 적용될 때부터'div'에 적용될 때 렌더링이 다른지입니다. IE에만 국한된 것은 아닙니다. 그것은 크롬과 파이어 폭스에서 1px 차이이고, ie8에서 2px 차이입니다. – alice

오, 오, 미안 나는 질문을 오해했다. 무시하십시오. 하지만 질문에 다소 답하기 위해 내 질문을 편집했습니다. –

답변