컨테이너의 세로 맞춤 텍스트 웹킷과 파이어 폭

Question

파이어 폭스와 WebKit 기반 브라우저는 높이/줄 간격이 균일하고 글꼴 크기가 고르지 않은 요소에 포함 된 경우 다른 방식으로 텍스트를 세로로 정렬하는 것처럼 보입니다. 혹은 그 반대로도). 비슷한 주제의 글을 보았지만 내 질문에 대해서는 큰 도움이되지 못했다.

http://alternativeto.net/test2.htm을 고려하십시오. 이와 정말 간단한 페이지 단지

.box 
    { 
     font-size: 15px; 
     font-family: Helvetica, Arial; 
     background-color: Blue; 
     height: 20px; 
     width: 60px; 
     color: White; 
     line-height: 20px; 
    } 

그리고

<div class="box"> 
     A text. 
    </div> 

당신은 크롬과 파이어 폭스에서 해당 페이지를 열 경우 서로 다른 방법으로 텍스트를 정렬 것을 알 수 : http://screencast.com/t/tjgA2d7T

인가 이 문제를 해결할 방법이 있습니까? "text-align"속성이나 내가 놓친 어떤 것이 있습니까?

Answer 1

브라우저 렌더링 문제입니다. 사용 라인 높이가 지정된 높이보다 1 픽셀의 예는 :

.box 
{ 
    background-color: Blue; 
    color: White; 
    font-family: Helvetica,Arial; 
    font-size: 15px; 
    height: 18px; 
    line-height: 17px; 
    width: 60px; 
} 

Answer 2

당신이 정확한 수직 정렬을 할 수있는 방법을 찾고 있다면, Problem with vertical-align: middle; 스택 오버플로 질문 체크 아웃 - 내가 거기에 해결책을 설명했다.

파이어 버그와 크롬이 이것을 다르게 표시하는 이유에 대한 답변을 원한다면 조금 더 복잡 할 것입니다. 선 높이 맞춤은 글꼴 선 렌더링을 기반으로하며 글꼴은 브라우저에서 매우 다른 방식으로 처리 할 수 ​​있습니다. 예를 들어, 글꼴 다듬기 및 글꼴 두께는 실제로 페이지에서 엉망이 될 수 있습니다.

또한이 페이지에서 CSS 재설정을 사용하고 있습니까? 글꼴 관련 조정도 포함되어 있으며 브라우저 간 문제를 해결하는 데 도움이 될 수 있습니다. CSS Tools: Reset CSS을 참조하십시오.

Answer 3

이것은 브라우저가 서브 픽셀 텍스트 위치를 처리하는 방법의 차이 때문입니다. 줄 높이가 20  픽셀이지만 글꼴 크기가 15 픽셀 인 경우 텍스트는 줄 상자 위쪽에서 2.5   픽셀에 있어야합니다. Gecko 실제로 그 작업을 수행 한 다음 페인트에 필요한대로 픽셀 그리드에 대한 앤티 앨리어싱 또는 스냅을 수행합니다. WebKit은 레이아웃 중에 정수 픽셀의 위치를 ​​반올림합니다. 어떤 경우에는 두 가지 접근 방식이 픽셀마다 다른 해답을 제시합니다. 서로 비교하지 않는 한 어떻게 차이점이 있다고 말할 수 있습니까?

어쨌든 하프 - 리딩이 정수인 경우 (즉, line-height에서 font-size를 뺀 값이 짝을 이루는 경우) 실제로 필요한 경우 렌더링을보다 일관성있게 만듭니다.

Answer 4

어, 끔찍했지만 사실! 난 그냥 아이콘에 작은 개수의 거품을 만들려고 이걸 만났어요 - 너무 작아서 텍스트 바로 옆에 있어야 모든 픽셀이 계산되었습니다. 텍스트 크기보다 1 배 작은 라인 높이를 FF와 Chrome 사이의 표시 필드를 평평하게 만들었습니다.