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.
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.
