라인 높이 웹킷

Question

VS 파이어 폭스 2 픽셀 낮은 I 다음 CSS 가지고 웹킷 파이어 폭스 30 줄까지 중심

.btn_container { 
cursor: pointer; 
font-family: Tahoma,Verdana,Arial; 
font-size: 11px; 
padding: 0; 
width: auto; 
} 

.btn_center { 
background: blue; 
color: #FFFFFF !important; 
display: block; 
float: left; 
font-weight: bold; 
height: 32px; 
line-height: 32px; 
padding: 0 10px; 
} 

라인 높이지만, (32).

나는 브라우저가 다르게 렌더링된다는 것을 알고 있지만 텍스트를 제대로 센터에 가져 오는 데 문제가 없었습니다. http://jsfiddle.net/mstefanko/EGzEB/5/

Answer 1

나는 이것을 과거에 무겁게 테스트했습니다. 나는 그것을 텍스트 흔들림라고 부른다. 당신이 통제 할 수있는 것이 아닙니다. 이를 최소화하기 위해 할 수있는 일은 모든 텍스트 요소에 명시 적 라인 높이 (특히 px 단위)를 적용하는 것입니다.

기본 줄 크기는 브라우저마다 다르고 글꼴 크기가 다른 글꼴 군마다 다릅니다. 명시 적 선 높이 설정은 해당 주소를 지정합니다.

그러나 그 안의 텍스트는 행간 높이 공간 내에 정확히 배치되는 것이 브라우저의 브라우저에 따라 다를 수 있습니다. 글꼴 크기와 선 높이의 조합에 따라 모든 브라우저가 일치합니다. 예를 들어, Arial은 font-size:11px이고 line-height:14px은 FF, Webkit 및 IE에서 동일하게 나타납니다. 그러나 라인 높이를 13px 또는 15px로 변경하십시오.이 값은 1px 브라우저와 브라우저에 따라 다릅니다.

표준 또는 정의 된 동작이 없습니다. 특정 글꼴 군, 글꼴 크기 및 행 높이가 해당 운영 체제의 브라우저에서 어떻게 렌더링되는지 결과입니다. 예를 들어, Arial은 상대적으로 일관된 글꼴로, 명시 적 라인 높이가 정의되어있는 한 일반적으로 1px 이상 변화하지 않지만 Helvetica는 4 ~ 6 픽셀만큼 다양합니다.

Answer 2

는 사실은 정반대의 경험 : 다음 예제 당신이 파이어 폭스에서 몇 픽셀 낮은 떨어질 것을 볼 수 있습니다에서

. 필자는 일부 헤더 요소가 IE7/호환 모드와 Chrome/Safari에서 더 높게 위치한다는 점에 유의했습니다. 그래서 많은 어려움을 겪은 후에 크롬과 톱니 바퀴 마진을 검사했습니다 : 1.6em 또는 헤더에 추가 된 것이 있습니다. 나는 이것이 나를 위해 일한 것을 발견

... 그 값을 추가하고 일부 요소를 아래로 밀어하지만 패딩 옵션은 나를 위해 잘 작동 헤더의 높이를 초래하기 때문에 작동하지 않았다 조정 :

H1, H2, H3, H4, H5, a.mainTab div { 
    -webkit-padding-before: 1px; 
} 

a.mainTab div는 패딩/여백에 응답하지 않는 스팬을 가지므로 div에 래핑되었습니다. 이는 span span 헤더에도 적용될 수 있습니다.