Original text: http://www.mikkolee.com/13
I have carefully studied the vertical-align attribute in recent days, and the result surprised me. This very experienced CSS standard actually performs differently in each browser.
There are a lot of values for vertical-align, including baseline sub sub top text-top bottom text-bottom middle and various length values (%, em, ex, etc.). Let me show you one of the most exaggerated values I think: 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 (the picture is made on purpose, so that I can see the relative position clearly):
Well, this result is actually very incredible. Generally, I think Firefox will 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 Firefox's side. To be honest, I don't know what's going on.
I carefully studied the "Authoritative CSS Guide (Second Edition)" and even looked up W3C, and then made a picture about vertical-align by myself:
According to 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 the same position as the surrounding elements, such as the top of the picture and the top of the surrounding text. When text-top and text-bottom are text-top (or bottom) of the element aligns the text-top (or text-bottom) of the surrounding element. When length (%, em, ex), it moves up based on baseline, so positive numbers go up and negative numbers go down. When middle, the center of the element is aligned with the center of the surrounding element. The definition of the center here is: the picture is of course half the height, and the text should be moved up by 0.5ex based on the baseline, that is, the center of the lowercase letter x . However, many browsers often define the unit of ex as 0.5em, so it is not necessarily the center of x (as an example, the height of x should be 10px, while em is 18px, so the two values are different).
However, even according to the above guidelines, it is incredible that the explanations of each browser are so different. I'm too lazy to study why this is the case. In general, they should have different definitions of the position of each line in the font, so this problem is not only related to vertical-align, but also to the browser's explanation of the structure of inline text and inline pictures.
Finally, I will give you a test page, and you can take a look at the explanations of different values of vertical-align by each browser.
http://www.mikkolee.com/weblab/001_vertical/
You can test other values, such as middle or text-top, which are completely different from each browser. If you have any experience, please discuss it~~