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?!