CSS Standard: vertical-align property

<br />Original text: http://www.mikkolee.com/13
I have been studying the vertical-align property in detail in recent days, and I was surprised by the results. This very "senior" CSS standard actually behaves differently in different browsers.
There are quite a few values for vertical-align, including baseline sub supper top text-top bottom text-bottom middle and various length values (%, em, ex, etc.). Let me first show you a value that I think is the most exaggerated: bottom. The code is as follows:
p {
font-size: 18px;
line-height: 36px;
font-family: Tahoma, sans-serif;
}
img {
vertical-align: bottom ;
}
Then let's take a look at the effect of this CSS in various browsers (I deliberately made the picture that way so that you can see the relative position clearly):

Well, this result is actually quite strange. I would normally think that Firefox would interpret it more correctly than IE, but after looking at Opera, I found that it is the same as IE, while Safari/Win stands on Firefox's side. To be honest, I have no idea what's going on.
I carefully studied the CSS Definitive Guide (Second Edition), and even consulted W3C, and then made a diagram about vertical-align:

According to the definition of W3C, when the vertical-align of an inline element is set to: baseline, top, bottom, the baseline (or middle, top, bottom) of the element is aligned with the same position of the surrounding elements, such as the top of an image and the top of the surrounding text. When using text-top and text-bottom, the top (or bottom) of the element is aligned with the text-top (or text-bottom) of the surrounding elements. When calculating length (%, em, ex), it moves upward based on the baseline, so positive numbers go up and negative numbers go down. When it is middle, the center of the element is aligned to the center of the surrounding elements. The definition of "center" here is: the image is of course half the height, and the text should be 0.5ex up from the baseline, that is, the center of the lowercase "x" . However, many browsers often define the unit of ex as 0.5em, so it is not necessarily the exact center of x (taking the above picture as an example, the height of x should be 10px, while em is 18px, so the two values are different).
However, even following the above guidelines, it is still baffling to me that each browser interprets it so differently. I'm too lazy to research why this is the case. Generally speaking, it should be that their definitions of the position of each line of the font are slightly different, so this problem is not only related to vertical-align, but also has a lot to do with the browser's interpretation of the structure of inline text and inline images.
Finally, here is a test page for you to see how different browsers interpret different values of vertical-align.
http://www.mikkolee.com/weblab/001_vertical/
You can test other values, such as middle or text-top, which are also completely different in different browsers. Let's discuss what you think~

<<: Why the explain command may modify MySQL data

>>: Thoroughly understand JavaScript prototype and prototype chain