0

There is a demo page with two block-level elements, namely h1 and h2. I try to put all baselines exactly on the grid in a cross-browser way, but I fail with the second heading.

For the h1, I have experimented with margin-top and found that its value can be set between 1.5px and 1.85px—then the heading snaps to baselines in all browsers.

But trying to find a similar range for the margin-top of h2, I reached a deadlock. In most browsers (e.g. Chrome or Safari) the appropriate range turned out to be 4px to 4.99px. But in Firefox on Windows (and only on Windows) it is 3px to 3.99px. So there is no intersecting subrange for possible values of margin. If the heading is perfectly snapped in one browser, it misses by exactly 1 pixel in the other.

Can you suggest any solution?

  • Try this: https://drewish.com/tools/vertical-rhythm/ – Toby Jul 26 '16 at 23:45
  • @Toby, this approach is good in theory, but in practice it leads to the same ±1-pixel scatter in different browsers. –  Jul 27 '16 at 11:34

1 Answers1

0

I discovered that Firefox on Mac behaves the same way as it does on Windows, but on Linux it treates spacing differently. So until a cross-browser solution is found, I’m afraid I have to use CSS hacks to target Firefox on Windows and Mac specifically:

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

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