Collection of CSS issues: Chinese and English letters and Chinese characters have different line heights

Recently, I encountered a problem when writing a CSS: the line heights of English letters and Chinese characters are different, which leads to deviations in the margin or padding properties set when all Chinese characters, all English letters, and Chinese characters are mixed... Of course, this situation exists in IE browser, and Safari, Google Chrome, Firefox, and Opera do not have similar problems.

css

Cause:

When using all Chinese characters:

Generally speaking, when you select text, you can see that Chinese characters are aligned upward (specifically, when you select a font, it looks like there is an extra part below it from the background. In CSS terms, it means the padding-bottom attribute is generated. To explain the problem, let’s just say that there is a padding attribute).

When using all English letters:

Similar to how all Chinese characters are aligned down when all English characters are written, attributes similar to padding-top will appear. Regardless of whether it is all Chinese characters or all English characters, the line height is the same.

Mixed letters and Chinese characters:

But if you mix Chinese characters and English letters together, you can see the difference. Now select all the fonts and you can see that the padding is padding=padding-top+padding-bottom, which means there will be an extra padding-top (or padding-bottom). Generally, when the font is 12px, the extra part is about 2px.

Solution:

Change font:

Originally I wanted to use line-height to fix it, but line-height is the distance between the baseline of each line, and because the baseline of Chinese characters and English letters are different, it doesn't work. Besides, if it is used as a navigation menu with only one line, it is useless.

The only way to start is with fonts. There is really a font that can solve this problem. This font is "simsun". "simsun" is the long-standing "Songti". The file name of "Songti" in the Windows font folder is "simsun". Its brother "simhei" is commonly known as "Heibody".

Therefore, the solution is to set the font-family to "simsun", which may lose some effects. If anyone has a better solution, please give some advice.