This is a query I had regarding the use of the sub tag:
Using <sub> tag and preserve line-height
To achieve the subscript effect, I tried using position: relative; along with a smaller font size. However, I noticed that this solution is not achieving pixel-perfection. The <div> containing the emulated sub tag appears to have a larger height compared to the one without it, even when the text in both divs is exactly the same. This behavior was observed in Chrome and Firefox, as demonstrated in the following live code example:
On my Mac's Chrome browser, the output shows:
Height of first div is: 163
Height of first div is: 162
While this live code snippet works as expected on Chrome, on Firefox, the rendering of text in lines differs causing the issue to be similar. I am seeking an explanation for this behavior. Is it a browser bug or intended behavior? Can this be fixed using CSS (by subtracting the top and bottom border height of 2, the height should be divisible by the line-height, which is 20 in the demo, hence preventing a height of 163)?