Use CSS to control ie in English font display alignment

Source: Internet
Author: User

This is a less noticeable problem, in IE browser below the English font mixed row, often appear misaligned.

As shown in Figure 1, under IE when a line of text in English and Chinese at the same time, the link underline will be folded line, it means this time in English is not aligned! (Firefox is not affected by this issue)

Figure 1 Internet Explorer below the English language is not aligned

After testing, the default is directly in the page to set the link when it will not appear this case, such as Figure 2!

Figure 2 English-Chinese alignment below IE browser

So the doubt comes again, what caused the Chinese and English deviations?! What is the solution?! So after my test I found two situations (of course, there are more likely to be caused.) You can try it on your own), in which the adjacent elements of the English object have Vertical-align property settings (such as a small picture in front, or a text box, we need to align them vertically, generally to the picture, text box (other arbitrary inline block elements) set Vertical-align: Middle, to achieve), then it will affect the Chinese and English in the wrong.

There is also a situation where the parent element (except the table) has the Vertical-align property setting, and the inside of the child element is not aligned in English.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test</title>
<style type="text/css">
* { margin:0; padding:0; }
html { background:#fff; }
body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; color:#333; }
</style>
<body>
<div style="vertical-align:middle;">
<a href="">为什么我老是对不齐呢?why??</a>
</div>
</body>

How to solve this problem?!

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.