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
Recommend
CSS sample code with search navigation bar
This article shows you how to use CSS to create a...
Docker image optimization (from 1.16GB to 22.4MB)
Table of contents The first step of optimization:...
JavaScript Basics: Error Capture Mechanism
Table of contents Preface Error Object throw try…...
How to use tcpdump to capture packets in Linux system
Let me look at the example code first: 1. Common ...
HTML+CSS+JavaScript to achieve list loop scrolling example code
Description: Set a timer to replace the content of...
Detailed example of changing Linux account password
Change personal account password If ordinary user...
Comprehensive understanding of Node event loop
Table of contents Node Event Loop Event loop diag...
Zabbix implements monitoring of multiple mysql processes
Three MySQL instance processes are started on one...
CSS Problems with Using Position:fixed and Margin-top Together on Same-Level Elements
Problem Description I want to use CSS to achieve ...
In-depth analysis of homology and cross-domain, jsonp (function encapsulation), CORS principle
Table of contents Same Origin Policy Ajax request...
A brief summary of all encapsulation methods in Vue
Table of contents 1. Encapsulation API 2. Registe...
5 common scenarios and examples of JavaScript destructuring assignment
Table of contents Preface 1. Extract data 2. Alia...
MySQL uses covering index to avoid table return and optimize query
Preface Before talking about covering index, we m...
XHTML Web Page Tutorial
This article is mainly to let beginners understan...
Detailed steps to install Sogou input method on Ubuntu 20.04
1. Install Fcitx input framework Related dependen...