기본 격자에 물리기 위해 수직 간격을 조정할 수 없습니다.

Question

두 개의 블록 레벨 요소, 즉 h1 및 h2이있는 a demo page이 있습니다. 브라우저 기반으로 모든 기준선을 그리드에 정확하게 놓으려고 시도하지만 두 번째 제목에서는 실패합니다. h1를 들어

, 나는 margin-top 실험하고 그 값이 1.5px와 제목이 모든 브라우저에서베이스 라인에 스냅 - 그럼 1.85px 사이에서 설정 될 수 있다는 것을 발견했다.

그러나 margin-top이 비슷한 범위 인 h2을 찾으려고하면 교착 상태에 빠졌습니다. 대부분의 브라우저 (예 : Chrome 또는 Safari)에서 적절한 범위는 4px에서 4.99px으로 밝혀졌습니다. 그러나 Firefox (Windows에서만)에서는 3px에서 3.99px까지입니다. 따라서 가능한 여백 값에 대해 교차하는 하위 범위가 없습니다. 표제가 한 브라우저에서 완벽하게 맞춰지면 다른 표제에서 정확하게 1 픽셀만큼 누락됩니다.

해결책을 제안 할 수 있습니까?

Answer 1

Mac의 Firefox는 Windows와 동일한 방식으로 작동하지만 Linux에서는 간격을 다르게 처리합니다.

@media screen and (-moz-windows-theme) { 
    … CSS for Windows goes here … 
} 

@supports(-moz-osx-font-smoothing:auto) { 
    … CSS for Mac goes here … 
}