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 is one of the cases. It exists in IE browser, 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 (the specific manifestation is that when you select a font, it looks like there is an extra part below from the background. In CSS terms, the padding-bottom attribute is generated. To explain the problem, let’s say there is padding. properties).

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. Then select all the fonts and you can see that the padding at this time is padding=padding-top+padding-bottom, which means there will be more A padding-top (can also be said to be padding-bottom), when the general font size 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 won't work. Besides, if it is used as a navigation menu Only one line is still 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-legendary "Song Ti". The file name of "Song Ti" in the Windows font folder is "simsun", his brother "simhei" is commonly known as "heihei".

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.