It appears that Firefox and Chrome treat `vertical-align:top` differently for `<sup>` and `<sub>` tags with a tall line-height, as per the attached test-case. Firefox aligns them to the top of the line-box, while Chrome aligns them as though they are inline elements (that is, as though `vertical-align` is no longer `super`). Moreover, this only seems to happen with `<sup>` and `<sub>` tags. When I try a `<span>` that is inline or inline-block, both browsers render them similarly.
Bug 1524897 Comment 0 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
It appears that Firefox and Chrome treat `vertical-align:top` differently for `<sup>` and `<sub>` tags with a tall line-height, as per the attached test-case. Firefox aligns them to the top of the line-box, while Chrome aligns them as though they are inline elements (that is, as though `vertical-align` is no longer `super`). Moreover, this only seems to happen with `<sup>` and `<sub>` tags. When I try a `<span>` that is inline or inline-block, both browsers render them similarly. This is causing asterisks to appear too far up above their text on Deviant Art's age-consent form, as seen at https://webcompat.com/issues/25032