Невозможно настроить вертикальное расстояние для привязки к базовой сетке

Question

Существует a demo page с двумя блочными элементами, а именно h1 и h2. Я пытаюсь поместить все базовые линии точно в сетку кросс-браузерным способом, но я терпит неудачу со вторым заголовком.

Для h1, я экспериментировал с margin-top и обнаружил, что его значение может быть установлено между 1.5px и 1.85px -Тогда заголовок защелкивается исходных условий во всех браузерах.

Но пытаясь найти аналогичный диапазон для margin-top от h2, я достиг тупика. В большинстве браузеров (например, Chrome или Safari) соответствующий диапазон оказался 4px до 4.99px. Но в Firefox на Windows (и только на Windows) это 3px до 3.99px. Таким образом, для возможных значений поля нет пересекающегося поддиапазона. Если заголовок отлично привязан в одном браузере, он пропускает ровно 1 пиксель в другом.

Вы можете предложить любое решение?

Answer 1

Я обнаружил, что Firefox на Mac ведет себя так же, как в Windows, но в Linux он чередует интервалы по-разному. Таким образом, пока решение кросс-браузер не найден, я боюсь, что я должен использовать CSS хаки для целевой Firefox на Windows, и Mac конкретно:

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

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