CSS standard: vertical-align attribute_HTML/Xhtml_Web page production

Original text: http://www.mikkolee.com/13
I have carefully studied the vertical-align attribute in the past few days, and the result surprised me. This very "senior" CSS standard actually behaves differently in various browsers.
Vertical-align has many values, 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 made the picture like that intentionally so that I can see the relative position clearly):





Well, this result is actually very surprising. Generally, I would think that Firefox would explain it more correctly than IE, but after looking at Opera, I found that it is the same as IE, while Safari/Win is on the side of Firefox. To be honest, I don't know 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 myself:

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