Home > Industries > Internet
IE has always been criticized by advocates of web standards. When Firefox was born, more web page makers began to pay attention to Web standard design. Microsoft finally launched ie7. However, can IE7 really turn the storm, be it truly trusted by users, and be truly recognized by web designers?
Read the articles in the internet standard of IE7 series and witness the change of Internet Explorer 7 with you!
There is no post office on the Internet!Look at the figure below. Is it very kind? There is a sense of "paper. In fact, this feeling is really good, very nostalgic, very petty (suddenly think of the love letters I wrote before ^_^ ). However, when you visit the internet, you will find that there are very few web pages that simulate the text layout. Why? Didn't everyone think of it? Are you sure you have forgotten the "letter? Or is there no post office on the Internet to send these letters?
Web page of simulation letter paper
In fact, none of them are, either by no one, or by no one, but by a "worm. This worm is what we will talk about today-"replacing elements and line spacing bug ".
Bugs show up!There are two sample pages for testing. The first is an example where the body of the article does not contain a replacement element and the bug does not blame. The second is an example of a bug in IE6 when the article body contains a replacement element ( in this example.
Before giving an example, let's take a look at what is a replaced element )--
"An element for which the CSS formatter knows only the intrinsic dimensions. in HTML, IMG, input, textarea, select, and object elements can be examples of replaced elements. for example, the content of the IMG element is often replaced by the image that the "src" Attribute designates. CSS does not define how the intrinsic dimensions are found. this document is from the W3C website's definition of the replaced element.
First, my English level is too bad, and second, this English section is relatively simple, so I will not translate it here, and we should understand it all.
Test example Page 1 source code<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <meta name =" keywords "content =" Yes! B/S !, Web standards, Yang Zhengyi, blog Park, instance code "/> <br/> <meta name =" Description "content =" this is a simple yes! B/S! Article Example page, blog from Yang zhengtao, http://justinyoung.cnblogs.com/"/> <br/> <title> yes! B/S! Article Example page </title> <br/> <style type = "text/CSS"> <br/> # lineheight_bug {<br/> line-Height: 39px; <br/> font-size: 14px; <br/> Background: URL ('HTTP: // callback) No-Repeat; <br/> padding: 0; <br/> padding-left: 20px; <br/> Height: 435px; <br/> width: 530px; <br/> border: 1px solid red; <br/>}< br/> </style> <br/> </pead> <br/> <body> <br/> <Div id = "lineheight_bug"> <br/> <p> This is an instance used to demonstrate the line-height bug. It comes from IE7's Web Standard-6: (corrected) Placement element and line spacing bug. This article is part of the series of IE7 web standards. The series of IE7 web standards is a series of articles that mainly explain the revision and improvement of IE7 compared with IE6. It is of some guiding significance for web designers to smoothly transition from web design to IE6 platform. Now, the sixth article in The IE7 web standards series has been published. The title of the first five articles is: IE7 web standards-1: Preface (and directory), IE7 web standards-2: (Improvement) richer CSS choices, IE7 web standards-3: (corrected) Layout disorder, IE7 web standards-4: (corrected) opera Phantom bug and IE7 web standard-5: (corrected) go up! Finally, it went up!. If you are interested, visit http://justinyoung.cnblogs.com /. Thank you. </P> <br/> </div> <br/> </body> <br/> </ptml> <br/>Tip: you can modify the code in the text box before running it.
Let's take a look at the display results of Example page 1 in IE6 and IE7. We can see that there is no difference. (For the coexistence methods of IE6 and IE7, refer to the article IE6, IE7, and IE8 coexistence methods )--
Test example Page 2 source code
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <meta name =" keywords "content =" Yes! B/S !, Web standards, Yang Zhengyi, blog Park, instance code "/> <br/> <meta name =" Description "content =" this is a simple yes! B/S! Article Example page, blog from Yang zhengtao, http://justinyoung.cnblogs.com/"/> <br/> <title> yes! B/S! Article Example page </title> <br/> <style type = "text/CSS"> <br/> # lineheight_bug {<br/> line-Height: 39px; <br/> font-size: 14px; <br/> Background: URL ('HTTP: // callback) No-Repeat; <br/> padding: 0; <br/> padding-left: 20px; <br/> Height: 435px; <br/> width: 530px; <br/> border: 1px solid red; <br/>}< br/> </style> <br/> </pead> <br/> <body> <br/> <Div id = "lineheight_bug"> <br/> <p> This is an instance used to demonstrate the line-height bug. It comes from IE7's Web Standard-6: (corrected) Placement element and line spacing bug. This article is part of the series of IE7 web standards. The series of IE7 web standards is a series of articles that mainly explain the revision and improvement of IE7 compared with IE6. it has certain guiding significance for web designers to smoothly transition from web design from IE6 to IE7 Platform. Now, the sixth article in The IE7 web standards series has been published. The title of the first five articles is: IE7 web standards-1: Preface (and directory), IE7 web standards-2: (Improvement) richer CSS choices, IE7 web standards-3: (corrected) Layout disorder, IE7 web standards-4: (corrected) opera Phantom bug and IE7 web standard-5: (corrected) go up! Finally, it went up!. If you are interested, visit http://justinyoung.cnblogs.com /. Thank you. </P> <br/> </div> <br/> </body> <br/> </ptml> <br/>Tip: you can modify the code in the text box before running it.
On this test page, we place a small image (a red square in the middle of the fourth line of text) in the main part of the article ). With the above definition of the replaced element, we know that is a replacement element. In this way, the bug conditions are met. Therefore, in IE6, we can see this bug (the context spacing of the fourth line of text is faulty, leading to confusion in the entire layout ). As follows --
First, let's introduce two concepts: Line-height and font-size, Row Height and font size. Line-height minus font-size is called "leading )". The half distance is called "half distance ". This "semi-spacing" will be added to the top and bottom of each line of text, so the gap between the line and the line (the half-spacing below the previous section and the half-spacing above the next section) it's coming out. The image below may be helpful to your understanding.
This bug occurs because IE6 mistakenly combines the upper and lower half spacing of the line with the replacement element with the adjacent upper and lower half spacing. As a result, the text line spacing of the line with the replacement element is reduced by half, so the page is messy.
Note: although the above text is a good explanation of the cause of the Bug, it is only a reference, not an official explanation.
Incomplete and imperfect "how ?"The cause may not be important, but how to fix it must be important. After all, the market share of IE6 cannot be ignored.
Unfortunately, although there are solutions, they are not perfect. The method is to set margin-top and margin-bottom for those replacement elements. In order to "open" the row spacing that is "COMPRESSED ". The following sample code is for your reference. If you have a better solution, please kindly advise. Thank you. (You can submit a solution through the [blog community Web standard design team)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <meta name =" keywords "content =" Yes! B/S !, Web standards, Yang Zhengyi, blog Park, instance code "/> <br/> <meta name =" Description "content =" this is a simple yes! B/S! Article Example page, blog from Yang zhengtao, http://justinyoung.cnblogs.com/"/> <br/> <title> yes! B/S! Article Example page </title> <br/> <style type = "text/CSS"> <br/> # lineheight_bug {<br/> line-Height: 39px; <br/> font-size: 14px; <br/> Background: URL ('HTTP: // callback) No-Repeat; <br/> padding: 0; <br/> padding-left: 20px; <br/> Height: 435px; <br/> width: 530px; <br/> border: 1px solid red; <br/>}< br/>/* use the CSS hack of IE6 to fix the bug in IE6. You can visit: http://www.cnblogs.com/Ju to learn about CSS hack. Stinyoung/archive/2007/09/14/css-hack.html */<br/> # lineheight_bug IMG {<br/> _ margin: 17px 0; <br/> _ vertical-align: middle; <br/>}< br/> </style> <br/> </pead> <br/> <body> <br/> <Div id = "lineheight_bug"> <br/> <p> this is an instance used to demonstrate the line-height bug. It comes from IE7's Web Standard-6: (corrected) Placement element and line spacing bug. This article is part of the series of IE7 web standards. The series of IE7 web standards is a series of articles that mainly explain the revision and improvement of IE7 compared with IE6. it has certain guiding significance for web designers to smoothly transition from web design from IE6 to IE7 Platform. Now, the sixth article in The IE7 web standards series has been published. The title of the first five articles is: IE7 web standards-1: Preface (and directory), IE7 web standards-2: (Improvement) richer CSS choices, IE7 web standards-3: (corrected) Layout disorder, IE7 web standards-4: (corrected) opera Phantom bug and IE7 web standard-5: (corrected) go up! Finally, it went up!. If you are interested, visit http://justinyoung.cnblogs.com /. Thank you. </P> <br/> </div> <br/> </body> <br/> </ptml> <br/>Tip: you can modify the code in the text box before running it.
The following figure shows the effect after the fix --
The CSS hack for IE6 is used in the fix. For more information about CSS hack, see "Examples of practical CSS hack (with source code) conforming to Chinese characteristics and the current network situation.
Related Article resource listStart 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
