Solutions to the problem of mixed rankings in Chinese and English web pages_Experience exchange

Basically I am going crazy with this problem, the symptoms are as follows

Symptom description: Under IE (6 or 7, 8 has not been tried), when Chinese and English are mixed and the default font is used, and the li list is used to make float, the symptoms as shown above will appear, and the text is arranged up and down. Misalignment. It affects the aesthetics of the layout. The reason for the situation in the picture above is that the text baselines in Chinese and English are different. The lower edge of the arial font is one pixel lower than the Song font (both size 12), and the upper edge is two pixels shorter than the Song font. Moreover, English also has situations where the upper and lower baselines of i and y are different. Therefore, when Chinese and English are mixed and aligned, there will be obvious height differences, making the layout uneven. See enlarged image.

Adopt the solution of using Song style for both Chinese and English characters

can solve the problem of misaligned text arrangement, but Song Dynasty English words are serif fonts (Times New Roman is serif fonts in English). The fonts are compact and have many details. They are very eye-catching when arranged together, but in When writing in succession, it is easy to be confused in identification and look at the wrong lines. For more information about the advantages and disadvantages of serif fonts, please see this article. In contrast, it is more beautiful and elegant to use sans-serif fonts when expressing English.

Solution 1: The discovery of "dumpling" children's shoes.

English uses tahoma font - Song font, arial and tahoma font comparison - arial and tahoma sans serif are more refined

When Chinese and English are mixed, the situation of using tahoma font

The line heights of mixed Chinese and English, and pure Chinese combinations are the same, but a is underlined and glued together with the Chinese in the hover state.

Defect: When using the tahoma font, in IE6 and below versions, the underline of all Chinese font links will appear to stick to the font. Taobao also uses this solution. I believe that in large-scale projects, when different people work together to complete the modules of a page, it is worthwhile to make the fonts more standardized and reduce misalignment under unified specifications, and to use the tahoma font with underlines that will appear to stick to the fonts

The following was found with rice children's shoes:

English uses arial font, and Chinese uses Song font. You can indicate line-height:1.231 in the tag, which can solve the problem of unequal line heights and font and underline adhesion. (I don’t know whether it is suitable to mix Chinese and English on a large scale. It needs to be verified later.)

Summary: Thank you for rice, thank you for dumplings, thank you for YUI, and thank you for Taobao!