•  19-08-2019
  •  | 
  •  

문제

Firefox 3은 Unset이 없을 때 라인 높이가 다른 브라우저가 렌더링하는 방식과 다른 새로운 동작을 도입했습니다. 따라서 중요한 섹션은 해당 브라우저에서 너무 높게 렌더링 할 수 있습니다. 기초가 다르기 때문에 글로벌 비율을 설정하는 것은 작동하지 않습니다. "1"과 같은 단위가없는 값을 설정하는 것도 작동하지 않습니다. 이 차원을 정상화 할 수있는 방법이 있습니까?

도움이 되었습니까?

해결책

계산 된 값 line-height: normal 플랫폼, 브라우저 (및 동일한 브라우저의 다른 버전의 다른 버전), 글꼴 및 동일한 글꼴의 다양한 크기마다 다릅니다. (Eric Meyer의 기사 참조).

다음과 같은 단위가없는 값 설정 ... 

body {line-height: 1.2;}

...~해야 한다 브라우저 사이의 간격을 정상화하기 위해 노력하십시오. 이것이 작동하지 않는 경우 스타일 시트에 대한 더 많은 설명을 제공 할 수 있습니까?

"Pixel-Perfect"결과를 얻는 것은 어렵지만 (불가능합니까?) 가능한 한 예측할 수있는 결과를 얻으려면 글꼴 크기를 곱할 때 멋진 라운드 값을 생성하는 선 높이를 사용하려고합니다. 우리는 사용자 에이전트의 기본 글꼴 크기를 알 수 없지만 16 픽셀이 다소 일반적입니다. 

body 
{
    font-size: 100%;
    line-height: 1.5;
}

사용자 에이전트의 시작 글꼴 크기가 실제로 16 픽셀 인 경우 라인 높이 1.5 멋지고 24 픽셀로 나옵니다. 사용자는 기본 글꼴 크기 또는 페이지 줌을 변경할 수 있으며 다른 브라우저마다 페이지를 스케일링하는 방법이 다릅니다. 그럼에도 불구하고, 나는 대다수의 사용자들에게 합리적인 성공을 거두었다고 생각합니다. 라인 높이를 정확하게 나오게 할 수 없다면 일부 브라우저는 값을 반올림하기보다는 값을 자르는 것처럼 보이기 때문에 아래에서 약간 아래보다 약간 위로 정수 위로 촬영합니다.

또한 선 높이에 백분율을 사용하면 값이 상속 될 때 다르게 작동합니다. 

body 
{
    font-size: 100%;
    line-height: 150%;
}

p
{
    font-size: 75%;
}

기본 글꼴 크기 16 픽셀에서 시작하여 선 높이는 24 픽셀입니다. 이내에 <p> 요소 글꼴 크기는 12 픽셀이되지만 라인 높이는 ~ 아니다 18 픽셀이되고 오히려 24 픽셀로 남아 있습니다. 이것이 차이입니다 line-height: 1.5 그리고 line-height: 150%. 언제 body {line-height: 1.5;} 라인 높이는 사용됩니다 <p> ~이다 18 픽셀.

다른 팁

당신이 할 수있는 일은 전혀 없습니다. 모든 브라우저에는 CSS와 컨텐츠를 렌더링하는 방법이 있습니다. "마스터"재설정을 사용할 수 있지만 (Cowgod가 제안한대로), 그럼에도 불구하고 궁극적으로 정렬 문제를 해결하지는 않습니다. 실제 렌더링 엔진으로 인해 있습니다. 기존 웹 사이트에 CSS를 Apple에 테스트하십시오. 픽셀을 전반적으로 완벽하게 만들 수 있는지 알려주세요. 그렇지 않습니다.

실제로 픽셀 완벽을 달성하는 유일한 방법은 특정 브라우저에 대한 특정 CSS를 구현하는 것입니다. 모질라에는 @-moz-doc, IE에는 자체 해킹이 있지만 이들 중 어느 것도 W3C 사양의 일부가 아니며 표준이 중요하다는 것을 알고 있습니다. 그래서 많은 옵션이 아닙니다.

다윗이 위에서 말했듯이 어렵습니다. 나는 실제로 불가능하다고 생각하는 경향이있다. 그리고 나는 시간을 보냈다. 나를 믿었다! 내가 셀 수있는 것보다 거의 더 화를 냈습니다. 삼키기가 어려운 약이지만 모든 사람이 동일한 브라우징 엔진을 사용하지 않는 한 (실제로 인터넷을 내 의견으로는 큰 도약을 할 것입니다) 주위에는 아무런 방법이 없습니다. [Gecko] [Webkit] [Presto] [Trident] [Trident] [무엇이든] 백엔드를 다루기 위해 브라우저에서 원하는 인터페이스를 때리는 것은 그리 어렵지 않을 것입니다. 하나는 모두 오픈 소스이며 프로젝트를 병합하고 실제로 갈 수 있습니다. 사람들은 함께 놀리는 법을 배워야합니다;)

당신은 이것을 해결할 수 있습니다 :

라인 높이를 1로 설정 한 다음 패딩 탑 및 패딩 바닥을 사용하여 텍스트에서 0을 설정하고 높이를 자동으로 설정하십시오.

.zeroed_in_element {
    padding: 4px 2px 5px 2px;
    height: auto;
    line-height: 1;
}

요소 스타일로 모든 브라우저 불일치를 제거하기 위해 항상 스타일을 "재설정"해야합니다.

좋아요 Eric Meyer의 CSS 재설정. 야후 하나도 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top