What to do if the English alphabet and Chinese characters in CSS are different?

Source: Internet
Author: User
Recently, when writing a CSS, encountered a problem: the English alphabet and Chinese characters are not the same, resulting in the full Chinese characters, all the English alphabet and Chinese characters mixed with the margin or padding attributes set the deviation ... Of course this situation exists in IE browser, Safari, Google Chrome, Firefox, opera are no similar problems

Causes of the production:

When the whole Chinese character:

The general situation in the selected text can be seen that the Chinese characters are on the alignment (the specific expression is the selected font, from the background appears to be a part of the following, in the CSS terminology is produced by the Padding-bottom attribute, in order to explain the problem is to say that there is padding attribute bar).

Full English alphabet When:

Similar to the whole Chinese character in the case of full English is the next alignment, there will be similar padding-top properties. The line height is the same regardless of whether it is a full Chinese character or a full English language.

Mixed Letter Chinese characters:

But if you mix the characters and the English letters together, you can see the difference, and then check all the fonts to see that this is the filler is padding=padding-top+padding-bottom, That is, there will be more than a padding-top (or Padding-bottom), the general font in the case of 12px, the more out of the part is probably 2px.

Workaround:

To change the font:

Originally wanted to use line-height fixed, but line-height is the baseline of each line and the distance between the baseline, and because the Chinese character baseline and the English letter is different, so it does not work, and if it is used as a navigation menu only one row is not useful.
This only from the font up and down hand, there is really a font can solve the problem, the font is "SimSun", "SimSun" is the legendary "song Body", in the Windows font folder "song body" filename is "SimSun", his brother "Simhei" is usually called "blackbody".
So, the solution is to set the font-family "SimSun", which may lose some effect, there is no way if anyone has a better solution can advise.

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.