I had an issue with icons from an icon font aligning differently on Linux, iOS and Windows (seemingly browser-independent). With vertical-align:middle, they aligned properly on Linux, iOS and macOS, whereas with a vertical-align of -18%, it looked good on Windows and iOS, but not Linux.

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

• Prevents you from data breaches and liability risks
• Upgrade at your own pace
• Works with modern Rubies

Read more Show archive.org snapshot

Further investigation showed that not only icons, but also normal capital letters aligned differently. No setting of vertical-align could fix this, neither top, bottom, middle, nor additional paddings or margins. It seems like browsers take the baseline from the font file, but calculate all other values (top, bottom, middle, percentages, pixels, …) themselves.

Hence, the solution is to keep vertical-align untouched (baseline by default) and then adjust alignment with paddings, margins and the like. You should also set display:inline-block, if possible.