This is a less noticeable problem. When Chinese and English fonts are mixed in IE browser, misalignment often occurs.
So the doubt comes again, what causes the deviation between Chinese and English? ! What's the solution? ! So after my testing, I found two situations (of course there may be more causing situations. You can try it yourself). The adjacent elements of the Chinese and English objects have the vertical-align attribute setting (such as the previous small picture, or the text box , we need to align them vertically. Generally, when we set vertical-align:middle; for pictures and text boxes (any other inline block elements), it will affect the misalignment of Chinese and English.
Another situation is that when the parent element (except tables) has the vertical-align attribute set, the Chinese and English of the child elements inside will also be misaligned.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<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, Song Dynasty, sans-serif; color: #333; }
</style>
</head>
<body>
<div style="vertical-align:middle;">
<a href="">Why am I always misaligned? why??</a>
</div>
</body>
</html>
How to solve this problem? !
Let’s talk about the first one first, which is the solution to the misalignment problem caused by the vertical-middle of adjacent elements:
add a zoom:1 to the Chinese and English objects to trigger its haslayout. Through research, it is found that once it has a haslayout, the Chinese and English objects There will be no misalignment.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<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, Song Dynasty, sans-serif; color: #333; }
</style>
</head>
<body>
<div>
<a href="" style="zoom:1;">Why am I always misaligned? why??</a>
</div>
</body>
</html>
The second case is the solution to the misalignment problem caused by the vertical-middle of the parent element:
Add the sentence vertical-align:baseline to the Chinese and English objects to solve the problem!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<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, Song Dynasty, sans-serif; color: #333; }
</style>
</head>
<body>
<div style="vertical-align:middle;">
<a href="" style="vertical-align:baseline;">Why am I always misaligned? why??</a>
</div>
</body>
</html>
But we can see that the underline seems to be too tight. At this time, we still need to add zoom:1; to trigger its hasLayout to avoid being too tight! .
<a href="" style="zoom:1;"vertical-align:baseline;">Why am I always misaligned? why??</a>
If you encounter other situations where Chinese and English are misaligned In this case, you can also try to use the above two methods to solve the problem. Of course, the safest and most effective way is to use Song Dynasty in both Chinese and English.