The result is not because of the strict supervision of the Director, must be required to solve the details, perhaps I will not delve into the root of the solution, and then thank Mtime responsible and strict colleagues.
First, describe the problem:
If shown, under IE when a line of text at the same time with English and Chinese, link underline will occur folding line, it means this time in English is not aligned! (Firefox is not affected by this issue)
But tested, this is not the case when you set the link directly on the page by default
<! 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= "html" http-equiv= "Content-type"/>
<title> Construction Station Teaching network </TITLE>
<style type= "Text/css"
* {margin : 0; padding:0;
HTML {background: #fff;}
Body {position:relative; Font:12px/1.6em Verdana, Lucida, Arial, Helvetica, song, serif; color: #333;}
</style>
</head>
<body>
<div>
<a href= "http://www.jzread.com" id= "AA" Title= "Construction Station teaching Network" ><IMG src=/uploadfile/2010/0705/20100705105544309.png "style=" vertical-align:middle; "alt=" Construction Station Teaching Network "/></A>
<a href=" "> Why am I always right? Why? </a>
</div>
</body>
</html>
So puzzled again, what caused the Chinese and English deviation?! What is the solution? So after my test, I found two situations (of course, there may be more.) 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 it, then it will affect the alignment of both Chinese and English.
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" >
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta content= "HTML; Charset=utf-8 "http-equiv=" Content-type "/>
<title> Construction Station Teaching Network </title>
<style type= "Text/css" >
* {margin:0; padding:0;}
HTML {background: #fff;}
body {position:relative; Font:12px/1.6em Verdana, Lucida, Arial, Helvetica, song, serif; color: #333;}
</style>
</head>
<body>
<div style= "Vertical-align:middle;" >
<a href= "http://www.jzread.com" id= "AA" title= "Construction Station teaching Network" ><img src=/uploadfile/2010/0705/20100705105544309. PNG "alt=" Construction station teaching network/></a>
<a href= "" > Why am I always right? Why? </a>
</div>
</body>
</html>
How to solve this problem?
First, the problem of misaligned deviations caused by the vertical-middle of adjacent elements:
The haslayout is triggered by a zoom:1 in Chinese and English, and the study finds that once it has haslayout, Chinese and English will not align.
<! 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= "html" http-equiv= "Content-type"/>
<title> Construction Station Teaching network </TITLE>
<style type= "Text/css"
* {margin : 0; padding:0;
HTML {background: #fff;}
Body {position:relative; Font:12px/1.6em Verdana, Lucida, Arial, Helvetica, song, serif; color: #333;}
</style>
</head>
<body>
<div>
<a href= "http://www.jzread.com" id= "AA" Title= "Construction Station teaching Network" ><IMG src=/uploadfile/2010/0705/20100705105544309.png "style=" vertical-align:middle; "alt=" Construction Station Teaching Network "/></A>
<a href=" "style=" zoom:1; > Why am I always right? Why? </a>
</div>
</body>
</html>
The second scenario is that the vertical-middle of the parent element causes an misaligned bias problem solution:
To the Chinese and English objects add a sentence vertical-align:baseline can be solved!
<! 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= "HTML; Charset=utf-8 "http-equiv=" Content-type "/>
<title> Construction Station Teaching Network </title>
<style type= "Text/css" >
* {margin:0; padding:0;}
HTML {background: #fff;}
body {position:relative; Font:12px/1.6em Verdana, Lucida, Arial, Helvetica, song, serif; color: #333;}
</style>
</head>
<body>
<div style= "Vertical-align:middle;" >
<a href= "http://www.jzread.com" id= "AA" title= "Construction Station teaching Network" ><img src=/uploadfile/2010/0705/20100705105544309. PNG "alt=" Construction station teaching network/></a>
<a href= "style=" vertical-align:baseline; > Why am I always right? Why? </a>
</div>
</body>
</html>
But we can see that the underline seems to stick too tight, this time we still need to add a sentence zoom:1, trigger its haslayout to avoid the close!
<! 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= "HTML; Charset=utf-8 "http-equiv=" Content-type "/>
<title> Construction Station Teaching Network </title>
<style type= "Text/css" >
* {margin:0; padding:0;}
HTML {background: #fff;}
body {position:relative; Font:12px/1.6em Verdana, Lucida, Arial, Helvetica, song, serif; color: #333;}
</style>
</head>
<body>
<div style= "Vertical-align:middle;" >
<a href= "http://www.jzread.com" id= "AA" title= "Construction Station teaching Network" ><img src=/uploadfile/2010/0705/20100705105544309. PNG "alt=" Construction station teaching network/></a>
<a href= "style=" zoom:1; Vertical-align:baseline; " > Why am I always right? Why? </a>
</div>
</body>
</html>
If you are in any other situation where the English and Chinese are not aligned, you can also try to use both of these methods to resolve. Of course, the most effective insurance is the direct Chinese and English are unified use of the song body.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
